繁体   English   中英

如何使用 Gamepad API 检测按钮按下?

[英]How to detect a button press with Gamepad API?

我正在尝试编写一个网页,我可以在其中检测 Xbox 控制器上的按钮按下情况,并根据按下的按钮向用户显示一个布尔值。 现在,我可以检测到正在连接的控制器并将其显示为字符串。 文档说在这里使用此代码检测按钮按下:

var isPressed = navigator.getGamepads()[0].pressed;

但 Chrome 在使用时显示此错误:

Uncaught TypeError: Cannot read property 'pressed' of null

该错误与上述代码行的.pressed部分有关。 所有文档都在 Mozilla 站点上,所以我假设他们在编写教程时使用了 FireFox。

我理想中想要的结果是这样的:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<h id="button"></h>
<h id="gpInfo"></h>
<script>
var i = 1; 
window.addEventListener("gamepadconnected", function(e) {
  var gp = navigator.getGamepads()[e.gamepad.index];
  document.getElementById("gpInfo").innerHTML = ("A " + gp.id + " was successfully detected! There are a total of " + gp.buttons.length + " buttons.")
  //alert("A " + gp.id + " was successfully detected!")
});
var isPressed = navigator.getGamepads()[0].pressed;
document.getElementById("button").innerHTML = isPressed;
</script>
<!-- <script type="text/javascript" src="gamepadtest.js"></script> -->
</head>
</html>

该代码将在屏幕上打印一个布尔值,供用户在按下按钮时查看。 这是我第一次使用 JavaScript 和 HTML。 如果你能让你的答案对菜鸟友好,那就太好了! Gamepad APIGamepadButton 的文档

在抛出gamepadconnected事件之前,您不应引用 Gamepad 对象。 此外,您还需要一个循环来轮询按​​钮值。 这是一些修改后的代码:

var i = 1; 
window.addEventListener("gamepadconnected", function(e) {
  var gp = navigator.getGamepads()[e.gamepad.index];
  document.getElementById("gpInfo").innerHTML = ("A " + gp.id + " was successfully detected! There are a total of " + gp.buttons.length + " buttons.")
  //alert("A " + gp.id + " was successfully detected!")

  setInterval(function(){
    isPressed = gp.buttons[0].pressed;
    document.getElementById("button").innerHTML = isPressed;
  }, 100)
});

我没有足够的声誉来对Caleb Denio 的回答添加评论,但关于 Nathan 对该答案的评论:

我用你的例子来监听 20 个按钮,我可以检测到每个按钮,但是一旦我按下一个按钮,它不会改变不同按钮的另一个结果。

我在 Chrome 90 上看到了相同的行为。具体来说,一个新的 GamepadList 实例,包含新的 Gamepad 实例,似乎每次任何游戏手柄的状态发生变化(例如按下哪个按钮)时都会创建。

你可以用这个来测试它:

var gamepads = null;

function callback() {
    var new_gamepads = navigator.getGamepads();
    if(new_gamepads !== gamepads) {
        console.log('New GamepadList!', new_gamepads);
        gamepads = new_gamepads;
    }
}

var interval = setInterval(callback, 100);

...对我来说,记录“New GamepadList!” 每次我按下/松开按钮。

长话短说,您需要在每一帧轮询navigator.getGamepads()以检测游戏手柄状态的变化。 因此,对 Caleb Denio 答案的极简修复是:

var i = 1; 
window.addEventListener("gamepadconnected", function(e) {
  var gp = navigator.getGamepads()[e.gamepad.index];
  document.getElementById("gpInfo").innerHTML = ("A " + gp.id + " was successfully detected! There are a total of " + gp.buttons.length + " buttons.")
  //alert("A " + gp.id + " was successfully detected!")

  setInterval(function(){

    // ===> Get a fresh GamepadList! <===
    var gp = navigator.getGamepads()[e.gamepad.index];

    isPressed = gp.buttons[0].pressed;
    document.getElementById("button").innerHTML = isPressed;
  }, 100)
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM