Short story

of the Gamepad API

Falsy Values 2015

Andrzej Mazur@end3rEnclave Games
Falsy Values — Warsaw, Poland — October 12th 2015


Gamepad API

W3C Working Draft

Browser Support

Gamepad API browser support

Chrome 35+, Firefox 29+ Opera 22+, Edge 12+

Chrome for Android 45+

Can I Use?

Gamepad API - Can I Use

Supported Devices

Gamepad 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: ";

Detecting disconnection

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

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;
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");

Axis threshold

Buttons: integer, 0 or 1.

Axes: float, -1 to 1.

Axis threshold
Config.threshold = 0.5;

Case Study: Hungry Fridge

Hungry Fridge - main menu


Hungry Fridge - gameplay on mobile


Hungry Fridge - gameplay on desktop

Let's play!


Dead Trigger 2

Full Screen, Pointer Lock, Gamepad

Firefox OS TV

Panasonic Firefox OS TV

WebVR and the future of the Web

WebVR Oculus Touch


Gamepad API resources


Gamepad API is OK!

Supported, easy to implement, no plugins.

Rich console-like experience in the browser!

Thanks! Questions?



Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r