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>