Gamepad
The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id.
A Gamepad object can be returned in one of two ways: via the gamepad property of the gamepadconnected and gamepaddisconnected events, or by grabbing any position in the array returned by the Navigator.getGamepads() method.
Note: The support of gamepad features varies across different combinations of platforms and controllers. Even if the controller supports a certain feature (for example, haptic feedback), the platform may not support it for that controller.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 21 | 12 | 29 | 10.1 | 25 | 10.3 | |
| The Gamepad.axes property of the interface returns an array representing the controls with axes present on the device (e.g., analog thumb sticks). | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The buttons property of the Gamepad interface returns an array of GamepadButton objects representing the buttons present on the device. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The Gamepad.connected property of the interface returns a boolean indicating whether the gamepad is still connected to the system. | 25 | 12 | 29 | 10.1 | 25 | 10.3 |
| The Gamepad.id property of the interface returns a string containing some information about the controller. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The Gamepad.index property of the interface returns an integer that is auto-incremented to be unique for each device currently connected to the system. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The Gamepad.mapping property of the Gamepad interface returns a string indicating whether the browser has remapped the controls on the device to a known layout. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
secure_context_required Experimental Secure context required | 86 | 86 | 91 | | 86 | |
| The Gamepad.timestamp property of the Gamepad interface returns a DOMHighResTimeStamp representing the last time the data for this gamepad was updated. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The GamepadButton 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. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The GamepadButton.pressed property of the GamepadButton interface returns a boolean indicating whether the button is currently pressed (true) or unpressed (false). | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
secure_context_required Experimental Secure context required | 86 | 86 | 91 | | 86 | |
| The GamepadButton.value property of the GamepadButton interface returns a double value used to represent the current state of analog buttons on many modern gamepads, such as the triggers. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnectedevent and Window.gamepaddisconnectedevent are fired in response to. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The GamepadEvent.gamepad property of the GamepadEvent interface returns a Gamepad object, providing access to the associated gamepad data for fired Window.gamepadconnectedevent and Window.gamepaddisconnectedevent events. | 21 | 12 | 29 | 10.1 | 25 | 10.3 |
| The GamepadEvent() constructor creates a new GamepadEvent object. | 35 | 12 | 29 | 10.1 | 35 | 10.3 |
secure_context_required Experimental Secure context required | 86 | 86 | 91 | | 86 | |
| The Navigator.getGamepads() method returns an array of Gamepad objects, one for each gamepad connected to the device. | 35 | 12 | 29 | 10.1 | 35 | 10.3 |
getGamepads (secure context required) Experimental Secure context required | 86 | 86 | 91 | | 86 | |
| The gamepadconnected event is fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used. | 143 | 143 | 89 | 16 | 143 | 16 |
| The gamepaddisconnected event is fired when the browser detects that a gamepad has been disconnected. | 143 | 143 | 89 | 16 | 143 | 16 |
| Other | ||||||
html.elements.iframe.allow.gamepad Experimental | | | 91 | | | |
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Available with a vendor prefix: webkit (21)
- Available with a vendor prefix: webkit (25)
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- This browser only partially implements this feature
- This feature was removed in a later browser version (143)
- The `ongamepadconnected` event handler property is not supported. See bug 40175074.
- This browser only partially implements this feature
- This feature was removed in a later browser version (143)
- The `ongamepadconnected` event handler property is not supported. See bug 40175074.
- This browser only partially implements this feature
- This feature was removed in a later browser version (89)
- The `ongamepadconnected` event handler property is not supported. See bug 1697093.
- This browser only partially implements this feature
- This feature was removed in a later browser version (16)
- The `ongamepadconnected` event handler property is not supported. See bug 223860.
- This browser only partially implements this feature
- This feature was removed in a later browser version (143)
- The `ongamepadconnected` event handler property is not supported. See bug 40175074.
- This browser only partially implements this feature
- This feature was removed in a later browser version (16)
- The `ongamepadconnected` event handler property is not supported. See bug 223860.
- This browser only partially implements this feature
- This feature was removed in a later browser version (143)
- The `ongamepaddisconnected` event handler property is not supported. See bug 40175074.
- This browser only partially implements this feature
- This feature was removed in a later browser version (143)
- The `ongamepaddisconnected` event handler property is not supported. See bug 40175074.
- This browser only partially implements this feature
- This feature was removed in a later browser version (89)
- The `ongamepaddisconnected` event handler property is not supported. See bug 1697093.
- This browser only partially implements this feature
- This feature was removed in a later browser version (16)
- The `ongamepaddisconnected` event handler property is not supported. See bug 223860.
- This browser only partially implements this feature
- This feature was removed in a later browser version (143)
- The `ongamepaddisconnected` event handler property is not supported. See bug 40175074.
- This browser only partially implements this feature
- This feature was removed in a later browser version (16)
- The `ongamepaddisconnected` event handler property is not supported. See bug 223860.
- This browser only partially implements this feature
- The default allowlist is `*` instead of `self` (as required by the specification).
Syntax
window.addEventListener('gamepadconnected', (e) => {
console.log('Controller connected:', e.gamepad.id);
});
function update() {
const gp = navigator.getGamepads()[0];
if (gp) console.log('A button:', gp.buttons[0].pressed);
requestAnimationFrame(update);
} Use cases
-
Use Gamepad
Use Gamepad when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
-
Handle edge cases
Apply Gamepad to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test Gamepad in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Make sure Gamepad supports the intended task without making the page harder to perceive, understand, or operate.