如何从 javascript 中的控制器获取键码?

How to get the keycodes from the controller in javascript?

我确实买了一个便宜的控制器(windows 认为它是 xbox 360 控制器)并且我想从控制器获得一些 javascript 按键事件。我确实在网上尝试了一些键码测试器,例如 http://keycode.info/,但他们没有回馈任何东西。我的问题是如何从 javascript.

中的控制器获取键码

你试过了吗

window.addEventListener("keydown", function(event) {
  alert("key: " + event.key + ", code: " + event.code);
}, true);

基本Events interface不支持手柄。但是还有另一个 API:

This is an experimental technology Check the Browser compatibility table carefully before using this in production.

HTML5 介绍了丰富的交互式游戏开发所必需的许多组件。 < canvas >WebGL< audio > 和 [=24] 等技术=]< video >,连同 JavaScript 实现,已经成熟到可以支持许多以前需要本地代码的任务的程度。 游戏手柄 API 是开发人员和设计人员访问和使用游戏手柄和其他游戏控制器的一种方式。

手柄API在Window对象上引入了新事件,用于读取手柄和控制器(以下简称手柄) 状态。除了这些事件之外,API 还添加了一个 Gamepad 对象,您可以使用它来查询连接的游戏手柄的状态,以及一个 navigator.getGamepads() 方法,您可以使用它来获取页面已知的游戏手柄列表。

Click here to find out more on MDN

我确实最终使用了一个名为 JoyToKey 的工具。

游戏手柄的按键操作不受事件处理。这是一个对象的 属性 存储在:

navigator.getGamepads()[].buttons[].pressed; 

$1 一个整数,从 0 到 3,因此您最多可以控制 4 个游戏手柄。
$2 一个整数,在我的例子中是 0 到 16 ;

所以,我们必须自己检查一下。

navigator.getGamepads() returns一个游戏手柄列表,看起来像这样:

{0: null, 1: null, 2: null, 3: null, length: 4}

如果连接了控制器,它看起来像这样:

{0: Gamepad, 1: null, 2: null, 3: null, length: 4}

第一个元素是一个 Gamepad 对象,它看起来像这样:

{
    axes: [0, 0, 0, 0], //these are directions keys;
    buttons: [GamepadButton, GamepadButton, ...] //these are buttons;
    connected: true, 
    id: "ACGAM R1", 
    index: 0,
}

buttons 列表中的元素是 GamepadButton 对象,它看起来像这样:

{pressed: false, value: 0}

如果您使用的是 Google Chome,您可以通过在 dev-tools[=] 中输入 navigator.getGamepads() 查看所有这些信息61=]( Ctrl+Shift+i 打开它 ) 在控制台.

如果你手头有游戏手柄,你可以用这个来测试它:

function gameLoop() {
    var gamepad = navigator.getGamepads()[0]; //get the first controller.
    if (gamepad && gamepad.connected) {
        //check if direction buttons (UP, DOWN, LEFT, RIGHT) was pressed
 var axes = gamepad.axes;
 for (var i in axes) {
     if (axes[i] != 0) { print('axes[%s] value is: %s', i, axes[i]); };
 };
 // to check if other buttons(A,B,C,D,OK,Exit...) was pressed
 var buttons = gamepad.buttons;
 for (var i in buttons) {
     if (buttons[i].pressed == true) { print("buttons[%s] pressed", i); };
 };
    };
};

var game_loop ;

//when controller connected, page will show: "Gamepad connected"
window.addEventListener("gamepadconnected", function(e) {
    print("Gamepad %s connected at %d", e.gamepad.id, e.gamepad.index);
    game_loop = setInterval(gameLoop, 50);  //check if a button was pressed 20 times every second.
});

//when controller disconnected, page will show: "Gamepad disconnected"
window.addEventListener("gamepaddisconnected", function(e) {
    print("Gamepad %s disconnected", e.gamepad.id);
    clearInterval(game_loop);  // stop checking

});
//end of the code.

//nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
// not about control keys
function print() {
    var args = ['== no string == ',];
    for (var i in arguments) { args[i] = arguments[i]; };
    var s = args[0], vs = args.slice(1);
    for (var i in vs) { s = s.replace(/%[a-z]/, vs[i]); };
    document.body.innerHTML = s ;
};
<html>
<title> test Gamepad buttons</title>
<body>
no Gamepad deteced!
</body>
</html>