javascriptcontrollerkeycodexbox360

How to get the keycodes from the controller in javascript?

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.

Solution

  • 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>