GamepadButton

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2017⁩.

* Some parts of this feature may have varying levels of support.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

TheGamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device.

AGamepadButton object is returned by querying any value of the array returned by thebuttons property of theGamepad interface.

Instance properties

GamepadButton.pressedRead only: A boolean value indicating whether the button is currently pressed (true) or unpressed (false).
GamepadButton.touchedRead only: A boolean value indicating whether the button is currently touched (true) or not touched (false).
GamepadButton.valueRead only: A double value used to represent the current state of 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.

The button values in the following example are stored as an array ofGamepadButton objects. This simple example checks to see if theGamepadButton.value of a button is greater than0, or if theGamepadButton.pressed property indicates the button has been pressed.

function gameLoop() {  const gp = navigator.getGamepads()[0];  if (gp.buttons[0].value > 0 || gp.buttons[0].pressed) {    b--;  } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed) {    a++;  } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed) {    b++;  } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed) {    a--;  }  ball.style.left = `${a * 2}px`; // ball is a UI widget  ball.style.top = `${b * 2}px`;  requestAnimationFrame(gameLoop);}