Take Control

of the Game

with the Gamepad API

Hungarian Web Conference 2014

Andrzej Mazur@end3rEnclave Games
Hungarian Web Conference — Budapest, Hungary — November 8th 2014

HTML5 Game Developer

Andrzej Mazur


W3C Working Draft



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

Browser Support

Gamepad API browser support


Gamepad API browser support - Chrome

Version 21+ (prefixes)

Right now: 38


Gamepad API browser support - Firefox

Version 29+ (Australis - April 29th 2014)

Version 24+ (prefixes⁄config)

Right now: 33


Gamepad API browser support - Opera

Version 24+

Right now: 25


Gamepad API browser support - Safari

No support

Internet Explorer

Gamepad API browser support - IE

Shipped in IE Developer Channel

Can I Use?

Gamepad API - Can I Use

Supported Devices

Gamepad devices
  • Best: wired Xbox 360 on Windows, worst: Xbox One
  • Tested: wireless Xbox 360 and PS3 on Mac (+driver)

Case Study: Hungry Fridge

Hungry Fridge - screen 1

The idea

GitHub Game Off II theme: Change

  • Good food vs bad food
  • Mobile vs desktop

Good food vs bad food

Hungry Fridge - screen 2

Mobile vs desktop

Hungry Fridge - screen 3

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;

Using the Gamepad API

to control the slides

about the Gamepad API

Demo Time!



  • Gamepad
  • Pointer Lock
  • Fullscreen
  • Storage
  • Geolocation


  • Easy to implement
  • No plugins
  • A lot of fun
  • Rich console-like experience...
  • ...in the browser!


Thanks! Questions?



Slides: end3r.com/slides/huwebconf-gamepad



Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r