HTML and CSS Reference
Playing Around with the Gamepad API
Andrzej Mazur, HTML5 Games Developer, Founder, Enclave Games
There is a great focus on making HTML5 games for mobile devices, which is good, of course, but core progamers
are usually visualized as having a gamepad in their hands. So why not use it and deliver the full experience of a game
using the Full Screen, Mouse Lock, and Gamepad APIs? The last API provides the ability to use a console's controller
to play HTML5 games—how cool is that? With the W3C specification presently being written, we will have an API that
is easy to implement, does not require any plug-ins to run in your browser, and is as simple as just plugging in your
device and playing the game right away.
Please remember that the Gamepad API is still in the early stages of development. The document describing its
implementation indicated Editor's Draft status at the World Wide Web Consortium. This means that the API can
change in the process, so the implementations and demos working right now may not work in the future when the
specification is closed and published as an official document. Though experimental, you can dive into it right now
and see how it will work in the future, and that's just what you will be doing in this chapter. You'll be using it at your
own risk, so it's not the best idea to use it for a big commercial project just yet, but it's perfect for a demo and as a
way to impress your game development friends. Plus you'll have an advantage over the competition when it is fully
It is important to know about browser support of the Gamepad API, as you'll be testing it yourself in one browser or
another. For now, only two browsers support the API implementation: Mozilla Firefox and Google Chrome.
The first one, Firefox, had a special build done by Ted Mielczarek where the API could be tested, even though it
wasn't available officially. After some work had been done, gamepad support was delivered in version 24 and above
of the Firefox browser. It was not available by default—you still had to set special flags in the config file.
If you're using Firefox 24-27, simply enter about:config in your browser address bar. You will get the warning
shown in Figure 10-1 .