Using GamePad in a browser

Wanting to add GamePad support to "15 Puzzle maker", I didn't expect the GamePad API to be so interesting.

While researching the documentation and examples on this topic, I was discouraged by such words as “listen to GamePad events” and “events do not happen in Chrome, only in Firefox”, and that there is still no single standard and everything can change at any time.

The desire and curiosity to make "15 Puzzle maker" friends with the GamePad were stronger. With game editors like Scirra Construct, it's easy to use the GamePad in browser.

Following the instructions, I created a "GamePad Connected" event by identifying the device with "navigator.getGamepads".
Most of the examples use the Xbox GamePad, but I used PlayStation 4 DualShock and had no problem with it.

var gamepad;
window.addEventListener('gamepadconnected',function(e){
        const update=()=>{
                     if(gamepad.buttons[12].pressed){alert("bottom");}
                else if(gamepad.buttons[14].pressed){alert("left");}
                else if(gamepad.buttons[15].pressed){alert("right");}
                else if(gamepad.buttons[13].pressed){alert("top");}
            }
    requestAnimationFrame(update);
    }
);

My first surprise was the lack of analogs for keyup and keydown and the definition of keystrokes has to be written manually by checking all the keys.

After I wrote the code to track all buttons and pointed to every frame “requestAnimationFrame”, I found that it works well in Firefox, but does not work in the Chrome browser. It turned out that you need to check not only the keystrokes, but also the connected gamepads.

Many thanks to this resource for the examples: https://www.javascripture.com/Gamepad

Then I needed to force the event to fire only once when the button was pressed, not every frame.
Then I added remembering the key pressed and not triggering an event if the pressed and remembered key are the same.

In my case, the complete code looked like this.

var gamepad,gamepadPress;
window.addEventListener('gamepadconnected',function(e){
    const update=()=>{
        for (gamepad of navigator.getGamepads()){ //checking connected gamepads
            if (!gamepad) continue;
            const statenow=gamepad.buttons.some(btn=>btn.pressed); // check the buttons pressed
            if (gamepadPress!==statenow){ // determine that the button has already been pressed and the action has been performed
                gamepadPress=statenow; // remember the pressed button so as not to repeat the action
                     if(gamepad.buttons[12].pressed){alert("bottom");}
                else if(gamepad.buttons[14].pressed){alert("left");}
                else if(gamepad.buttons[15].pressed){alert("right");}
                else if(gamepad.buttons[13].pressed){alert("top");}
            }
        }
        requestAnimationFrame(update); // set keystroke check for each frame
    };update(); // start checking the keys pressed after connecting the gamepad
});

I'm not sure if the code is correct, but it works

You can use GamePad in "15 Puzzle Maker" here

Editor | Demo | itch.io | GitHub

Using the GamePad in JavaScript is fundamentally different from using the keyboard. But I would not say that this is a bad thing, such a deep API is ideal for games where you need to be good at the GamePad, for example, in a fighting game, where mastery of key combinations and quick use of techniques are key factors. And this GamePad api is perfect for such tasks. Implementing this with common keyboard tools took a lot more time and code. I'm sure whoever came up with this API understood the topic.