Nintendo Switch ProコントローラーをMacに接続してGamepadAPIでイベントを受け取る 🎮

Gamepad APIをつかって、ブラウザからコントローラーの入力を取得。https://t.co/EQ4CxCylO6 pic.twitter.com/JuQ3At6RNP
— 君塚史高 (@ki_230) 2020年7月3日

昨日はNode.jsをつかって、Macに接続されたコントローラーの入力を取得しましたが、今日はGamepad APIをつかってフロントから値を取得してみました。

blog.kimizuka.org

Gamepad APIが非常に使いやすく、昨日よりも簡単に実装できました。

developer.mozilla.org

が。何故かプロコンをCSSでつくろうと思ってしまい、その部分に結構時間を使ってしまいました。

DEMO

See the Pen
Pro Controller with GamepadAPI by kimmy (@kimmy)
on CodePen.

動作未確認ですが、今回は数台繋いだ場合も考慮した実装を心掛けました。動くと信じてますが、動かなかったらごめんなさい。

JavaScript

const vue = new Vue({
  el: '#vue',
  data: {
    controllers: [{
      axes: [0, 0, 0, 0]
    }],
  }
});

window.addEventListener('gamepadconnected', function(evt) { 
  tick();

  function tick() {
    const controllers = navigator.getGamepads();
    const contollerLength = controllers.length;

    vue.controllers = [];

    for (let i = 0; i < contollerLength; ++i) {
      if (controllers[i]) {
        vue.controllers.push(controllers[i]);
      }
    }
    
    requestAnimationFrame(tick);
  }
});

navigator.getGamepads()で取得したGamepadをまるまるVueに渡すだけという力技で実装しています。これで動くんだからすごいですよね。Gamepad APIも、Vueも。
本当はロジックはJSに集約すべきなんですが、HTML側にバリバリ書いてしまいました。アナログスティックのところとか。
気になる方は是非CodePenをご確認ください。