Take Control

of the Game

with the Gamepad API

Meet.js Lublin 2015

Andrzej Mazur@end3rEnclave Games
Meet.js Lublin — Lublin, Poland — September 3rd 2015

HTML5 Game Developer

Andrzej Mazur


W3C Working Draft


Core editors:

  • Ted Mielczarek (Mozilla)
  • Scott Graham (Google)

Gamepad API demo

Gamepad API demo


Browser Support

Gamepad API browser support


Gamepad API browser support - Chrome

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


Gamepad API browser support - Firefox

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


Gamepad API browser support - Opera

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


Gamepad API browser support - Safari

No support

Internet Explorer

Gamepad API browser support - IE

No support


Gamepad API browser support - Edge

Version 12+

Can I Use?

Gamepad API - Can I Use caniuse.com/gamepad

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

The idea

GitHub Game Off II theme: Change

  • Good food vs bad food
  • Mobile vs desktop

Good food vs bad food

Hungry Fridge - how to play on mobile


Hungry Fridge - gameplay on mobile


Hungry Fridge - gameplay on desktop

Let's play!



Dead Trigger 2

Full Screen, Pointer Lock, Gamepad

Using the Gamepad API

to control the slides

about the Gamepad API

We need to go deeper

Firefox OS TV

Panasonic Firefox OS TV

WebVR and the future of the Web

WebVR Oculus Touch


Gamepad API resources end3r.github.io/Gamepad-API-Content-Kit/#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