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;
gamepadAPI.active = 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 = e.gamepad.id;
console.log("Connected Gamepad ID: "+gamepadID+".");
});
You can extract any data from the gamepad object and do whatever you want with it.
Prefixes
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.
