0

我正在尝试编写一个网页，我可以在其中检测 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 API和GamepadButton的文档

4

2 回答 2

2

我没有足够的声誉来为Caleb Denio 的答案添加评论，但关于 Nathan 对该答案的评论：

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

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

你可以用这个来测试它：

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);

...对我来说，记录“新 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)
});
于 2021-07-15T02:59:46.153 回答
1

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)
});
于 2020-03-22T21:18:15.237 回答