Gamepad API

1 minutes to read Contributors
  • Erika Doyle Navara
  • Abigail Carey

The Gamepad API is an emerging W3C standard that fires events based on user interaction with a gamepad controller, such as an Xbox One or Xbox 360 controller.

Some of the highlights to the Gamepad API include:

  • The navigator.getGamepads method, which returns an array of gamepad objects, each representing a separate gamepad device.
  • The gamepad object, containing properties that identify the state of the various inputs associated with the controller (buttons, thumbsticks, and so on).
  • The gamepad.buttons array, representing the states of the buttons supported by the controller.
  • The gamepad.axes array representing the state of a controller thumbstick.

The following example shows one way to use the Gamepad API in a webpage.

<!DOCTYPE html>
<html>
<head>
  <title>Gamepad API Sample</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <script>
    function gameLoop() {
      var gamepads = navigator.getGamepads();
      for (var playerIndex = 0; playerIndex < gamepads.length; playerIndex++) {
        var gamepad = gamepads[playerIndex];
        if (gamepad) {
          if (gamepad.buttons[6].pressed || gamepad.buttons[7].pressed) {
            // A trigger is pressed, fire weapon.
            fireWeapon(playerIndex);
          }
        }
      }

      window.requestAnimationFrame(gameLoop);
    }
    gameLoop();
  </script>
</head>
<body>

</body>
</html>

To see the Gamepad API in action, plug an Xbox controller into a device running Microsoft Edge for Windows 10 and then head over to the Flight Arcade demo on Test Drive. Check out this Gamepad sample on GitHub to see the Gamepad API in use.

For in-depth information about the Gamepad API, check out the Flight Arcade demo's learning page.

API reference

GamePad

Demos

Flight Arcade

Gamepad sample (Github)

Building Flight Arcade: Behind the scenes with WebGL, WebAudio and GamePad API

Specification

Gamepad