Gamepad.buttons

The Gamepad.buttons property of the Gamepad interface returns an array of gamepadButton objects representing the buttons present on the device.

Each entry in the array is 0 if the button is not pressed, and non-zero (typically 1.0) if the button is pressed. Each gamepadButton object has two properties: pressed and value:

  • The pressed property is a boolean indicating whether the button is currently pressed (true) or unpressed (false).
  • The value property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0 – 1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.

Syntax

readonly    attribute GamepadButton[]     buttons;

Example

The following code is taken from my Gamepad API button demo (you can view the demo live, and find the source code on Github.) Note the code fork — in Chrome Navigator.getGamepads needs a webkit prefix and the button values are stores as an array of double values, whereas in Firefox Navigator.getGamepads doesn't need a prefix, and the button values are stored as an array of GamepadButton objects; it is the GamepadButton.value or GamepadButton.pressed properties of these we need to access, depending on what type of buttons they are. In this simple example I've just allowed either.

function gameLoop() {
  if(navigator.webkitGetGamepads) {
    var gp = navigator.webkitGetGamepads()[0];

    if(gp.buttons[0] == 1) {
      b--;
    } else if(gp.buttons[1] == 1) {
      a++;
    } else if(gp.buttons[2] == 1) {
      b++;
    } else if(gp.buttons[3] == 1) {
      a--;
    }
  } else {
    var gp = navigator.getGamepads()[0];

    if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
      b--;
    } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
      a++;
    } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
      b++;
    } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
      a--;
    }
  }

  ball.style.left = a*2 + "px";
  ball.style.top = b*2 + "px";

  var start = rAF(gameLoop);
};

Value

An array of gamepadButton objects.

Specifications

Specification Status Comment
Gamepad
The definition of 'Gamepad.buttons' in that specification.
Working Draft Initial definition

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
buttonsChrome Full support 35
Full support 35
No support 21 — 34
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 29
Full support 29
No support 24 — 28
Disabled
Disabled From version 24 until version 28 (exclusive): this feature is behind the dom.gamepad.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 22
Full support 22
No support 15 — 21
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari Full support 10.1WebView Android No support NoChrome Android Full support 35
Full support 35
No support 25 — 34
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 32Opera Android Full support 22
Full support 22
No support 14 — 21
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
Full support 4.0
No support 2.0 — 3.0
Prefixed
Prefixed Implemented with the vendor prefix: webkit

Legend

Full support
Full support
No support
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Using the Gamepad API