Gamepad : Object

Represents a gamepad/controller. Connected gamepads are available through the navigator.getGamepads() method.

Instance Properties

axes : Array<Number> readonly

The joystick positions. May also contain the direction pad (+) pressed direction.

Example:

Press button on controller to connect.
<div id="axes" style="display: flex; flex-direction: column;"></div>
<script>
window.addEventListener('gamepadconnected', (event) => {
  const update = () => {
    const output = document.getElementById('axes');
    output.innerHTML = ''; // clear the output

    for (const gamepad of navigator.getGamepads()) {
      if (!gamepad) continue;
      for (const [index, axis] of gamepad.axes.entries()) {
        output.insertAdjacentHTML('beforeend',
          `<label>${gamepad.index}, ${index}
             <progress value=${axis * 0.5 + 0.5}></progress>
           </label>`);
      }
    }
    requestAnimationFrame(update);
  };
  update();
});
</script>

Run

Results:

buttons : Array<GamepadButton> readonly

The state of the buttons on the controller.

Example:

Press button on controller to connect.
<div id="buttons" style="display: flex; flex-direction: column;"></div>
<script>
window.addEventListener('gamepadconnected', (event) => {
  const update = () => {
    const output = document.getElementById('buttons');
    output.innerHTML = ''; // clear the output

    for (const gamepad of navigator.getGamepads()) {
      if (!gamepad) continue;
      for (const [index, button] of gamepad.buttons.entries()) {
        output.insertAdjacentHTML('beforeend',
          `<label>${gamepad.index}, ${index}
             <progress value=${button.value}></progress>
             ${button.touched ? 'touched' : ''}
             ${button.pressed ? 'pressed' : ''}
           </label>`);
      }
    }
    requestAnimationFrame(update);
  };
  update();
});
</script>

Run

Results:

connected : Boolean readonly

true when the gamepad is connected.

Example:

Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('connected:', event.gamepad.connected);
});
window.addEventListener('gamepaddisconnected', (event) => {
  console.log('connected:', event.gamepad.connected);
});
</script>

Run

Results:

id : String readonly

An id for the controller.

Example:

Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('id:', event.gamepad.id);
});
</script>

Run

Results:

index : Number readonly

Example:

Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('index:', event.gamepad.index);
});
</script>

Run

Results:

mapping : String readonly

Either '' or 'standard'. If 'standard', the buttons/axes will follow the layout as seen at https://w3c.github.io/gamepad/#fig-visual-representation-of-a-standard-gamepad-layout.

Example:

Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('mapping:', event.gamepad.mapping);
});
</script>

Run

Results:

timestamp : Number readonly

The last time there was an update from the gamepad. In milliseconds.

Example:

Press button on controller to connect.
<div id="buttons" style="display: flex; flex-direction: column;"></div>
<script>
window.addEventListener('gamepadconnected', (event) => {
  const update = () => {
    const output = document.getElementById('buttons');
    output.innerHTML = ''; // clear the output

    for (const gamepad of navigator.getGamepads()) {
      if (!gamepad) continue;
      output.insertAdjacentHTML('beforeend',
          `<label>${gamepad.index}: ${gamepad.timestamp}</label>`);
    }
    requestAnimationFrame(update);
  };
  update();
});
</script>

Run

Results:

home license contribute feedback toggle light/dark mode