vue 遊戲手柄使用

直接上代碼。

<template>
  <div class="home">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      interval: null,//時間間隔
    };
  },
  created() {
    var _this = this;
    // 監聽遊戲手柄
    window.addEventListener("gamepadconnected", function(e) {
      var gp = navigator.getGamepads()[e.gamepad.index];
      console.log(gp);
      _this.startgamepad(); // 啟動手柄
    });
    // 監聽遊戲手柄拔出
    window.addEventListener("gamepaddisconnected", function(e) {
      clearInterval(_this.interval); // 停止獲取手柄數據
    });
  },
  methods: {
    // 啟動手柄
    startgamepad() {
      var _this = this;
      // 每200ms 獲取一次手柄數據,查看是否按下手柄按鍵
      this.interval = setInterval(function() {
        var gamepad = navigator.getGamepads()[0];
        _this.remoteSensing(gamepad.axes);
        _this.pressKey(gamepad.buttons);
      }, 200);
    },
    // 手柄遙感
    remoteSensing(arr) {
      console.log(arr);
      // 下面是個人測試的:
      // arr[0] -1 ~ 1 : 左手邊 左 ~ 右
      // arr[1] -1 ~ 1 : 左手邊 上 ~ 下
      // arr[2] -1 ~ 1 : 右手邊 左 ~ 右
      // arr[3] -1 ~ 1 : 右手邊 上 ~ 下
    },
    // 手柄按鍵
    pressKey(arr) {
      // console.log(arr);
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value == 1) {
          console.log(i);
          // 根據個人情況判斷;不同手柄值不同。
          if (i == 0) {
            console.log("A");
          }
          if (i == 1) {
            console.log("B");
          }
          if (i == 2) {
            console.log("X");
          }
          if (i == 3) {
            console.log("Y");
          }

          if (i == 4) {
            console.log("左手1");
          }
          if (i == 5) {
            console.log("右手1");
          }
          if (i == 6) {
            console.log("左手2");
          }
          if (i == 7) {
            console.log("右手2");
          }

          if (i == 8) {
            console.log("BACK");
          }
          if (i == 9) {
            console.log("START");
          }

          if (i == 10) {
            console.log("左遙感按下");
          }
          if (i == 11) {
            console.log("右遙感按下");
          }

          if (i == 12) {
            console.log("");
          }
          if (i == 13) {
            console.log("");
          }
          if (i == 14) {
            console.log("");
          }
          if (i == 15) {
            console.log("");
          }
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.home {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>