Gamepad API:按钮事件未触发

时间:2017-06-25 04:13:38

标签: javascript bluetooth gamepad gamepad-api

我有一个蓝牙控制器,我用这个Gamepad测试器测试了所有按钮的数量: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前缀。 Gamepad测试人员可能会向我显示错误的按钮吗?谢谢你的帮助。

1 个答案:

答案 0 :(得分: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>
        )
    }
}