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>