How to get the keycodes from the controller in javascript?

Question

How to get the keycodes from the controller in javascript?

6.4k views Asked by Dennis At 20 February 2018 at 08:22

I did buy a cheap controller (windows thinks it's a xbox 360 controller) and I want to get some javascript keypress events from the controller. I did try some keycode testers online like http://keycode.info/ but they didn't gave something back. My question is how do i get the keycodes from the controller in javascript.

Original Q&A

There are 4 answers

Striped On 20 February 2018 at 08:24

Have you tried

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

theAlexandrian On 20 February 2018 at 08:44

The basic Events interface does not have support for gamepads. But there is another API for that:

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

HTML5 introduced many of the necessary components for rich, interactive game development. Technologies like < canvas >, WebGL, < audio >, and < video >, along with JavaScript implementations, have matured to the point where they can now support many tasks previously requiring native code. The Gamepad API is a way for developers and designers to access and use gamepads and other game controllers.

The Gamepad API introduces new events on the Window object for reading gamepad and controller (hereby referred to as gamepad) state. In addition to these events, the API also adds a Gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getGamepads() method which you can use to get a list of gamepads known to the page.

Click here to find out more on MDN

Dennis On 21 February 2018 at 09:02

I did ending up using a tool called JoyToKey.

**walknotes** · Accepted Answer · 2019-01-31T13:41:46+00:00

Gamepad's key press are not handled by events. It's a Object's property stored in:

navigator.getGamepads()[$1].buttons[$2].pressed;

$1 an integer, from 0 to 3, so you can have up to 4 gamepads to control.
$2 an integer, from 0 to 16 in my case ;

so, we must check it by ourself.

navigator.getGamepads() returns a Gamepad List, which looks like this:

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

if a controller connected, it looks like this:

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

the first element is a Gamepad Object, it looks like this:

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

elements in buttons List are GamepadButton Objects, it looks like this:

{pressed: false, value: 0}

if you are using Google Chome, you can check all these information by typing navigator.getGamepads() in dev-tools( Ctrl+Shift+i to open it ) in console .

if you have a gamepad in hand, you can test it use this:

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>

TechQA.

How to get the keycodes from the controller in javascript?

There are 4 answers

Click here to find out more on MDN

Related Questions in JAVASCRIPT

Related Questions in CONTROLLER

Related Questions in KEYCODE

Related Questions in XBOX360

Popular Questions

Popular Tags

Trending Questions