Gamepad API：按钮事件未触发

Question

我有一个蓝牙控制器，我用这个游戏手柄测试器测试了所有按钮的数字：http://html5gamepad.com/，所以我很确定按钮的值是正确的。但是，似乎没有任何反应，游戏手柄显示为“已连接”，只是按钮事件不起作用。下面是代码：

function gameLoop() {
  if (navigator.webkitGetGamepads) {
    var wgp = navigator.webkitGetGamepads()[0];

    if (wgp.buttons[12] == 1 || wgp.buttons[4] == 1) {
      console.log('move');
    }
};

gameLoop();

我哪里错了？我正在使用 Chrome，所以我有 webkit 前缀。游戏手柄测试器是否会向我显示错误的按钮？感谢您的帮助。

Answer 1

有类似的问题。检查gamepad.js/all.js.cofee 处的代码突出显示我们需要在每个更新周期从navigator 检索游戏手柄（它们不会自动更新），确保您的gameLoop() 被重复调用。例如在window.setInterval(gameLoop, 100) 或window.requestAnimationFrame(gameLoop)

参考：

import * as React from 'react';

interface SampleComponentState {}
class SampleComponent extends React.Component<React.CSSProperties, SampleComponentState>{

    private gamepadUpdateToken: number | null
    constructor(props?: React.CSSProperties){
        super(props)
    }

    private handleGamepad() {
        const gamepads: Gamepad[] = navigator.getGamepads ? 
            navigator.getGamepads() : 
            ((navigator as any).webkitGetGamepads ? (navigator as any).webkitGetGamepads() : [])
        if (gamepads.length == 0){ return }

        gamepads[0].buttons.forEach((button, index) => {
            if (button.pressed){
                console.log(`Pressed button ${index}`)
            }
        })

        gamepads[0].axes.forEach((axe, index) => {
            if (axe != 0){
                console.log(`Axe ${index} moved: ${axe}`)
            }
        })
    }

    componentDidMount(){
        this.gamepadUpdateToken = window.setInterval(this.handleGamepad, 100)
        window.addEventListener("gamepadconnected", (event: any) => {
            const newGamapad: Gamepad = event.gamepad
            console.log(newGamapad)
        })
    }

    componentWillUnmount() {
        window.removeEventListener("gamepadconnected")
        if (this.gamepadUpdateToken != null){
            window.clearInterval(this.gamepadUpdateToken)
        }
    }

    render(){
        return (
            <div>
            </div>
        )
    }
}