HTML and CSS Reference
In-Depth Information
Thanks to this code, you will have access to the connected gamepads and will set the Boolean variable saying that
at least one device is active. To do this, you will set up an event listener called gamepadconnected :
window.addEventListener("gamepadconnected", function(e) {
var controller = e.gamepad;
gamepadAPI.controllers[e.gamepad.index] = controller; = true;
The event will be fired, and the function inside will be executed as soon as any device compatible with the Gamepad
API is connected. You're assigning the gamepad object to the controller variable and then adding it to the controller's
table under the unique index where all of the connected gamepads reside. The last line is about setting the Boolean
variable to let you know that the gamepad is actually active and that you are ready to read the input from the player.
You can print out the gamepad unique ID in the JavaScript console if you write it down in your index.html file
inside the <script> tags:
window.addEventListener("gamepadconnected", function(e) {
var gamepadID =;
console.log("Connected Gamepad ID: "+gamepadID+".");
You can extract any data from the gamepad object and do whatever you want with it.
For some time, as in the CSS world, there was an issue with vendor prefixes. When using an API, one had to use the
names of the methods or attributes with the prefix that was unique to the browser in which it was executed. When
Firefox implemented the Gamepad API from the unfinished draft, the event gamepaddisconnected had to be prefixed
for that browser as follows:
window.addEventListener('MozGamepadConnected', gamepadConnectedFunction);
The same goes for the Chrome browser. Thus if you wanted to support it, you had to use WebkitGamepadConnected .
To have the Gamepad API code working in both browsers, you had to check to see if any of those methods existed.
Also, don't forget about the unprefixed version: GamepadConnected . Tricky, right? To see if a browser supports the
Gamepad API, you had to use something like this:
var gamepadSupportAvailable = navigator.mozGamepads || navigator.webkitGamepads || navigator.gamepads;
When you launch the code in Firefox, the attribute with the moz prefix will be used; for Chrome, it will be webkit .
For future-proof code when the API is fully implemented, the attribute without any prefix will be used.
Now let's think about other browser vendors that would implement their own support in the meantime: o
prefix for Opera and ms for Internet Explorer. That's a mess! The good thing is that the prefixes are being dropped,
so now the code will work without them and you won't have to remember all of those crazy hacks to check for
support. Now that's a relief!
Detecting Disconnection
You know how to detect the gamepad connection, so now let's manage the state when it gets disconnected. Usually,
it would be good to have alternative controls, for example, the keyboard. Of course, you can just show a box saying
that the user has to reconnect their device in order to play the game if you really need it.
Search WWH ::

Custom Search