One of the big obstacles in designing a game in HTML5 is that the popular gamepad hardware isn’t available.
Nobody wants to play a game with keyboard buttons, so the arrival of the Gamepad API brings us a lot closer to console-style gaming in the browser.
Browser support
At the time of writing, the only browsers that support the Gamepad API are Chrome and Firefox — the latest version of each working unprefixed.
However, the more we use this API, the more browser manufacturers will support it, and as a progressive enhancement we can start using it now.
Detecting a gamepad
The first thing we need to do is connect to the user’s gamepad, and we’ll use an event to do that.
This event will trigger when the user plugs in a gamepad or, if a gamepad is already connected, when a button is pressed:
window.addEventListener("gamepadconnected", function(e) {
console.log("Gamepad connected, gamepad is: "+
e.gamepad.id);
});
And of course, having tested for the gamepad being connected, we also need to detect if it is disconnected:
window.addEventListener("gamepaddisconnected", function(e) {
alert("You can't play without a gamepad!");
});
Note that these two events do not currently work properly in Chrome, in Chrome we need to use navigator.getGamepads to retrieve all (if any) available gamepads.
You can use this function to iterate to all the available Gamepads and spit out the information you need using a simple for loop. In this case really want to get the number of gamepads connected to the computer and for that all you really need to do is to call the function and then get the length of the array it returns:
var gamepads = navigator.getGamepads(); alert(gamepads.length);
If you test this on your page you can see that you immediately get an alert telling you the number of gamepads you have connected.
Gamepad properties
I’ve already referred to gamepad.id but there are a long list of other properties available for use:
- id: as we’ve seen, this property returns string information about the controller.
- index: returns an integer that is unique for each gamepad you connect.
- mapping: returns the mapping of the gamepad, if the browser is able to map the gamepad it will return standard.
- connected: returns a boolean, true if the gamepad is connected, and false if not.
- buttons: this property returns an array that represents all the buttons in the gamepad.
- pressed: returns a boolean, true if a button is pressed, false if not.
- value: returns a floating point reference to a pressed button.
- axes: this property returns an array that represents the controls with axes present in the device. Each entry is also a floating point value.
- timestamp: returns a timestamp with the last time the data of the gamepad was updated.
To see a demo of these properties in action check out this pen I created (Firefox is better).
Conclusion
With Canvas, Webgl and even Video and Audio we now have a much more interactive web, and API’s like the Gamepad API allow us to go even further when it comes to interactive applications and games on the Web.
