Take Control

of the Game

with the Gamepad API

{Your name, event, location, date}

Status

W3C Working Draft

www.w3.org/TR/gamepad/

Core editors:

Ted Mielczarek (Mozilla)
Scott Graham (Google)

Gamepad API demo

end3r.github.io/Gamepad-API-Content-Kit/demo/demo.html

Browser Support

Chrome

Version 21+ (prefixes), 35+ (default) [45]

Firefox

Version 24+ (prefixes), 29+ (default) [40]

Opera

Version 15+ (prefixes), 22+ (default) [31]

Safari

No support

Internet Explorer

No support

Edge

Version 12+

Can I Use?

caniuse.com/gamepad

Supported Devices

Most popular: XBox 360/One, PS3/PS4 on Windows/Mac.

Gamepad API Implementation

Privacy: interact first while the page is visible to get the event.

Connecting the Gamepad

window.addEventListener("gamepadconnected", function(e) {
	console.log("Gamepad connected: "+e.gamepad.id);
});

Detecting disconnection

window.addEventListener("gamepaddisconnected", function(e) {
	console.log("Gamepad disconnected: "+e.gamepad.id);
});

The Gamepad Object

id - information about the controller
index - unique integer of the connected device
connected - true if connected
mapping - layout of the buttons, "standard"
axes - array of floating point values, state of each axis
buttons - array of GamepadButton objects, state of each button, pressed and value properties

Detecting button presses

function addgamepad(gamepad) {
  controllers[gamepad.index] = gamepad;
  window.requestAnimationFrame(updateStatus);
}

function updateStatus() {
  for(c in controllers) {
    var controller = controllers[c];
    for(var i=0; i<controller.buttons.length; i++) {
      var buttonPressed = controller.buttons[i].pressed;
      if(buttonPressed) {
        console.log("Button id="+i+" was pressed");
      } else {
        console.log("Button id="+i+" was released");
      }
    }
  }
}