使用 Xbox One 控制器监听游戏手柄按钮事件答案

【问题标题】：Listen for gamepad button events with xbox one controller使用 Xbox One 控制器监听游戏手柄按钮事件
【发布时间】：2020-06-16 22:43:41
【问题描述】：

我想在 xbox one 控制器上收听按钮按下事件，但似乎对此的许多解决方案都是实验性的并且正在开发中。我发现的大多数显示如何从游戏手柄接收输入的示例都使用轮询方法来重复检查游戏手柄的事件，但对于我的应用程序来说，我可以记录按钮按下的确切时间是至关重要的，而我没有想要在扫描游戏手柄之间错过按键操作。

我可以使用 Firefox 或 Chrome，但我还没有在这两种浏览器中使用以下解决方案：

Firefox：根据此页面https://www.chromestatus.com/feature/5989275208253440#，“游戏手柄按钮和轴事件在标志dom.gamepad.non_standard_events.enabled 后面的Firefox 中实现”。我已在 Firefox 中启用此功能，但监听状态更改事件（如 https://www.smashingmagazine.com/2015/11/gamepad-api-in-web-games/ 所述）仍然无效。

Chrome： 这个 github 页面 https://github.com/MozillaReality/gamepad-plus/blob/master/README.md 看起来可以扩展 Gamepad API，因此我还可以在 Chrome 中监听按钮按下事件，但是当我尝试将 JavaScript 编译为独立模块时使用npm run build 我得到错误node_modules_missing 并且构建失败。

不胜感激有关如何启用 .addEventListener('gamepadbuttondown'... 在这两种浏览器中工作的建议。

【问题讨论】：

标签： google-chrome firefox gamepad xbox-one gamepad-api

【解决方案1】：

感谢 Christopher Van Wiemeersch 在https://codepen.io/cvan/pen/aOzgGE 的代码笔示例，我在 Firefox 中找到了解决方案。

首先我打开一个 Firefox 浏览器（版本 73.0.1）并在 URL 中输入about:config。然后我将dom.gamepad.non_standard_events.enabled 切换为true。

然后我使用了 Christopher 的 codepen 中的以下函数/侦听器：

var gamepadConnected = function (e) {
  console.log('Gamepad connected at index %d: %s. %d buttons, %d axes.',
    e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length);
};

var gamepadDisconnected = function (e) {
  console.log('Gamepad removed at index %d: %s.', e.gamepad.index, e.gamepad.id);
};


var gamepadButtonDown = function (e) {
  console.log('Gamepad button down at index %d: %s. Button: %d.',
    e.gamepad.index, e.gamepad.id, e.button);
};

var gamepadButtonUp = function (e) {
  console.log('Gamepad button up at index %d: %s. Button: %d.',
    e.gamepad.index, e.gamepad.id, e.button);
};
window.addEventListener('gamepadconnected', gamepadConnected);
window.addEventListener('gamepaddisconnected', gamepadDisconnected);

window.addEventListener('gamepadbuttondown', gamepadButtonDown);
window.addEventListener('gamepadbuttonup', gamepadButtonUp);

然后当按下按钮时，我使用var timestamp = new Date().getTime() 记录时间戳。

【讨论】：