游戏手柄 API:按钮事件未触发

Gamepad API: Button events not firing

我有一个蓝牙控制器,我已经用这个 Gamepad 测试仪测试了其中所有按钮的数量:http://html5gamepad.com/,所以我很确定按钮的值是正确的。但是,似乎没有任何东西触发,游戏手柄显示为 "connected",只是按钮事件不起作用。下面是代码:

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 前缀。 Gamepad 测试器会向我显示错误的按钮吗?感谢您的帮助。

有类似的问题。检查 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>
        )
    }
}