Gamepad: buttons プロパティ

Baseline Widely available

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

Gamepad.buttons は Gamepad インターフェイスのプロパティで、機器上に存在するボタンを表す gamepadButton オブジェクトの配列を返します。

配列内の各要素は、ボタンが押されていない場合は 0、ボタンが押されている場合は 0 以外の値（通常は 1.0）です。それぞれの gamepadButton オブジェクトには、 pressed と value という 2 つのプロパティがあります。

pressed プロパティはボタンが今押されているか (true) または押されていないか (false) を表す真偽値です。
value プロパティは多くの最新のゲームパッドのトリガーなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。値は 0.0 〜 1.0 の範囲で正規化され、0.0 は押されていないボタンを表し、1.0 は完全に押されたボタンを表します。

下記のコードはゲームパッド API ボタンのデモから取得したものです。(デモのライブを見ることができ、Github でソースコードを見つけることができます)。コードをフォークする際には以降に気をつけてください — Chrome では Navigator.getGamepads は webkit 接頭辞が必要で、ボタンの値は double 値の配列として格納されますが、 Firefox はNavigator.getGamepads では接頭辞が不要で、ボタンの値は GamepadButton オブジェクトの配列に保存されます。GamepadButton.value または GamepadButton.pressed プロパティはボタンの種類に応じてアクセスする必要があります。この簡単なサンプルでは一方のみを許可しています。

function gameLoop() {
  let a = 0;
  let b = 0;
  if (navigator.webkitGetGamepads) {
    const 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 {
    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.style.top = `${b * 2}px`;

  const start = rAF(gameLoop);
}