网页监听响应游戏手柄事件

---

前言

本篇内容测试环境为Chrome121版本,手柄为微软的xbox手柄

---

一、获取手柄按钮状态

Chrome浏览器针对手柄设备没有提供类似于鼠标键盘的事件监听接口，但是提供了获取手柄状态的接口，就是navigator.getGamepads属性，该属性返回的是一个数组，当没有检测到手柄时数组的值为[null, null, null, null]。如果有手柄那数组中的项就会包含Gamepad，也就是[Gamepad, null, null, null]。打印出来如下图所示：

这里的Gamepad就是一个手柄的所有参数，具体意义如下：

二、Buttons的17个项分别对应的按钮

我的xbox只有16个按钮，所以只找到16个对照
···

	"0": 'A',
    "1": 'B',
    "2": 'X',
    "3": 'Y',
    "4": 'LB',
    "5": 'RB',
    "6": 'LT',
    "7": 'RT',
    "8": 'BACK',
    "9": 'START',
    "10": 'LRom',//左摇杆按下
    "11": 'RRom',//右摇杆按下
    "12": 'directionUp',//方向键上
    "13": 'directionDown',//方向键下
    "14": 'directionLeft',//方向键左
    "15": 'directionRight',//方向键右

···

---

三、实时监听手柄状态改变，判断手柄按钮是否按下

代码如下：
···

	// 检测手柄按钮按下
    function buttonPressed(button: any) {
        if (typeof (button) == "object") {
            return button.pressed;
        }
        return button == 1.0;
    }

    // 监听游戏手柄按钮按下事件
    function checkGamepadsHandel() {
        let gamepads = navigator.getGamepads();
        //console.log('gamepads', gamepads);
        for (let i = 0; i < gamepads.length; i++) {
            let gamepad = gamepads[i];
            if (gamepad) {
                for (let j = 0; j < gamepad.buttons.length; j++) {
                    let button = gamepad.buttons[j];
                    if (buttonPressed(button)) {
                         console.log('按下' + j + '键');
                    }
                }
            }
        }
    }

    // 检测并响应游戏手柄按钮按下事件
   setInterval(checkGamepadsHandel, 100);

···