gamepad API

"Defines a low-level interface that represents gamepad devices in the browser." --W3C

Can I use it now?

The gamepad API is a W3C draft.

Currently only Chrome and Firefox have implementations.

Chrome requires you to enable it on the chrome://flags page.

Firefox requires a special build found here.

How low can you go?

The API is low-level.

There are no events. It relies on you polling the system for gamepad state changes.

<div id="output"></div>
<script>
function repeat() {
  window.webkitRequestAnimationFrame(repeat);
  var gamepads = navigator.webkitGamepads;
  $log = $('#output').text('');
  for (var i in gamepads[0].axes) {
    $log.append(gamepads[0].axes[i])
      .append('<br>');
  }
}
window.webkitRequestAnimationFrame(repeat);
</script>

Don't like limbo?

gamepad.js offers a wrapper for the low-level API.

Abstracts out vender prefixes (webkit, moz, etc.) and creates a common mapping for controller buttons and axes.

<div id="output"></div>
<script>
function repeat() {
  window.webkitRequestAnimationFrame(repeat);
  var gamepads = Gamepad.getStates();
  $('#output').text('')
    .append(gamepads[0].leftStickX).append('<br>')
    .append(gamepads[0].leftStickY).append('<br>')
    .append(gamepads[0].rightStickX).append('<br>')
    .append(gamepads[0].rightStickY).append('<br>');
}
window.webkitRequestAnimationFrame(repeat);
</script>

Why?

Gamepads are ubiquitous with video games.

With WebGL and Canvas2D, video games with JS and HTML are ready for the front stage.

Controlling websites with navigators and remotes is also possible now.

Links

This presentation - http://dannyfritz.github.com/JS-gamepad-API-lightning-talk

W3C Working Draft - http://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html
gamepad.js - http://www.gamepadjs.com/
MozillaWiki GamepadAPI - https://wiki.mozilla.org/GamepadAPI
Jumping the Hurdles with Gamepad API - http://www.html5rocks.com/en/tutorials/doodles/gamepad/