gamepad.js

About

gamepad.js is a Javascript library to enable using gamepads and joysticks in the browser.

It smoothes over the differences between browsers, platforms, APIs, and the wide variety of gamepad/joystick devices.

It offers two major features:

Browser support

gamepad.js relies on the browser having implemented the Gamepad API specification. This specification is still being drafted, so browser support is only in the early stages.

Chrome/Chromium

Currently supports the Gamepad API in dev channel on Windows, and in canary on Mac OS X. If you're not comfortable running "beta" quality software you should not install these.

You must enable the Gamepad API by going to chrome://flags and turning it on (near the bottom).

Firefox

Currently supported on Windows, Mac OS X, and Linux in a nightly build. If you're not comfortable running "beta" quality software, you should not install these.

Internet Explorer, Opera, Safari

Currently unsupported.

What gamepad should I buy?

The best overall answer is to get a Wired Xbox 360 Controller. It works out of the box on Windows XP, Windows Vista, Windows 7, and popular Linux distributions. On Mac OS X, it first requires a driver to be installed, but works fine.

If you have an Xbox 360 console, and want to use the Xbox 360 wireless controllers, you can instead get a Wireless Gaming Receiver, which lets them connect to the PC.

Other devices have varying support across platforms.

Windows (XP/Vista/7)

If you can, the best thing to do is to make sure that the gamepad supports the "XInput" API.

In addition to the Xbox 360 controller above the following devices support XInput so work well on Windows:

todo; add more verified devices here

Other controllers which emulate a 360 controller are relatively likely to be problem-free also.

Linux

Generally speaking most devices will work out of the box in Linux. So, getting one from above list of Windows-friendly devices is probably a safe bet. Some of the more exotic or old devices may not be mapped by gamepad.js but hopefully that will improve over time (patches welcome!).

Mac OS X

The driver situation is a bit dismal on OS X. The best bet is really to get a Wired Xbox 360 Controller as per above. Note that not all the pseudo-360 controllers listed in the Windows section will work. The safest bet is to get the "real" one.

Some people have also reported some success using Playstation 3 controllers, along with installing this driver.

Example

If you think you're all set, you can test your device/browser/OS combination here: http://sgraham.github.com/gamepad.js/example/.

Programming interface

The programming interface for gamepad.js is straightforward. First, include gamepad.js in your html:

<script src=".../path/to/gamepad.js" type="text/javascript"></script>

gamepad.js is a standalone file, and doesn't depend on any other files or libraries, so you can just grab it and put it somewhere convenient.

Check for support:

if (Gamepad.supported) {
    // Ready to rock!
} else {
    // Fallback or encourage user to bug their browser vendor
}

Then, during your window.requestAnimationFrame callback, do:

var pads = Gamepad.getStates();
for (var i = 0; i < pads.length; ++i) {
    if (pads[i]) {
        console.log(i + ": (" + pads[i].leftStickX + ", " + pads[i].leftStickY + ")");
    }
}

The list of available attributes on the returned array of pads and the range of values can be found here.

Feedback

No group/list yet, you can use the Issues tracker on github, scott.gamepadjs@h4ck3r.net, or @h4kr for now.