[英]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 API和GamepadButton 的文档
在抛出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.