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>