Gamepad API介绍和用法

官方测试页面https://html5gamepad.com/

淘宝乱买的

IMG_20190331_165009.jpg IMG_20190331_165018.jpg

连接手柄检测，

连接电脑后必须任意按下手柄按键才能触发

window.addEventListener("gamepadconnected", function(e) {
    console.log("控制器已连接于 %d 位: %s. %d 个按钮, %d 个坐标方向。",
    e.gamepad.index, //连接与api的第几位
    e.gamepad.id,//手柄的id
    e.gamepad.buttons.length,//按钮数量
    e.gamepad.axes.length);//摇杆有几个
});

输出结果视插入的手柄而定，记得要按下手柄才会输出
控制器已连接于 1 位: Xbox 360 Controller (XInput STANDARD GAMEPAD). 17 个按钮, 4 个坐标方向。

断开连接检测

window.addEventListener("gamepadconnected", function(e) {
    var gp = navigator.getGamepads()[e.gamepad.index];
    console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
    gp.index, gp.id,
    gp.buttons.length, gp.axes.length);
});

Gamepad disconnected from index 0: Xbox 360 Controller (XInput STANDARD GAMEPAD)

获取手柄实例

window.addEventListener("gamepadconnected", function(e) {
    var gp = navigator.getGamepads()[e.gamepad.index];
    console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
    gp.index, gp.id,
    gp.buttons.length, gp.axes.length);
});

属性	说明	返回值	功能
id	由生产厂家定义
index	整数，手柄位。请注意，断开一个设备然后连接一个新设备可能会重用以前的索引。
mapping	唯一：standard
connected	是否连接，bool值
buttons	数组，所有按钮组成
→ pressed	bool值，按钮是否按下
→ value	0~1表示按钮按压的深度
axes	每个摇杆的值组成的数组，每个-1~1之间
timestamp	有的设备支持，表示手柄运行时间

如何使用按钮信息——使用定时器轮询

window.addEventListener("gamepadconnected", function(e) {
    var scanPadTime = setInterval(function(){
      scanPadFun();
    },100);
});


function scanPadFun(){
    var mgp = navigator.getGamepads()[0];
    console.log(mgp.axes)//只获取了摇杆的值，你也可以获取其他的。
}
//window.clearInterval(scanPadTime)//清除定时器

以上就是全部用法，但是获取之前应该判断浏览器是否支持，和不同浏览器的调用方法

//这个获取的是手柄的数组，也就是index，你应该使用gp[index]获得手柄实例
var gp = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);