给你的网页游戏添加游戏手柄支持
fangka 2019-06-27
自从买了 Switch 手柄后一直想试试给自己写的小游戏增加手柄支持。今天终于抽出时间搞了一把。以下是笔记 ;)
navigator.getGamepads
HTML5 中获取游戏手柄的 API 是 navigator.getGamepads()。navigator.getGamepads 会返回一个可能包含 null 的数组。标准规定，对于同一个游戏手柄会在同一个下标中返回，不同的手柄必须不能使用其他手柄用过的下标——即便前者已经中断连接。如果没有检测到任何游戏手柄，实测在 Firefox 中会返回一个空数组，而在 Chrome、Safari 中会返回 [null, null, null, null]。
当浏览器检测到手柄后，navigator.getGamepads 就会返回包含该手柄对象的数组，每一个手柄对象都是 Gamepad 类型
实测笔者的 NS Pro 手柄在 Chrome、Safari 浏览器上有兼容性问题（不能识别左摇杆），所以下面测试均以 Firefox 为准（Edge 也正常）。同事表示他的 PS4 手柄没有问题。
Gamepad 类
Gamepad 类包含重要的属性，这里只介绍最重要的几个：
- id。字符串，包含了手柄驱动的名称信息。比如笔者的
NS Pro返回的是57e-2009-Pro Controller，可以用此字符串识别用户的手柄提供默认的按键映射。 - connected。表示该
Gamepad对象所表示的手柄是否还保持连接。 - timestamp。手柄对象的最后更新时间。实测笔者虽然没有动手柄，这个值仍然在不断增长（可能是摇杆的数值在微小变化的缘故），用处不是很大。
- mapping。表示浏览器是否可以识别手柄的布局。当前浏览器只能识别 类似 PS4 手柄的标准布局。如果能识别，返回
standard，否则返回空字符串（笔者的NS Pro识别不了）。
- axes。这个值表示手柄的摇杆的轴（一个摇杆有X、Y两个轴）。其所有值都在 -1~1 之间。HTML使用向右、向下的坐标系，所以正值表示右或上，负值表示左或下。标准规定，同一个摇杆的X、Y方向值必须相邻，且先X后Y。标准同时建议，如果有多个摇杆同时存在，主摇杆应该排在前面。所以如果有有左右两个摇杆，
axes返回的数组值应该表示：[左摇杆的X轴偏向, 左摇杆的Y轴偏向, 右摇杆的X轴偏向, 右摇杆的Y轴偏向] - buttons。这个值是一个
GamepadButton对象数组。标准建议数组的顺序应该按照主要按键优先排列。实测对于我的NS Pro手柄来说顺序是[B, A, Y, X, L, R ...]，而方向键排在最后四个。建议实际应用中给用户提供专门的界面映射按键。
GamepadButton 类
每一个 GamepadButton 实例表示手柄上的一个按键（包括方向键），它包含三个属性（MDN 上只写了两个，实际按照标准返回了全部三个）：
- pressed。布尔值，表示当前按键是否被按下。
- value。表示按键的深度（完全按下还是按到一半），值为 0~1 之间。大多数按键不支持压力感应，会直接返回0或1
- touched。如果手柄支持触摸，该值可表示当前按键被触摸但是没有按下的状态。如果不支持触摸，该值和
pressed一致。
连接事件
浏览器提供了两个手柄相关的事件。
- gamepadconnected。当浏览器检测到手柄连接时触发。回调函数的事件参数中包含 gamepad 属性，用户获得新连接的手柄对象
- gampaddisconnected。当浏览器检测到手柄失去连接时触发。
可以看到手柄没有类似键盘鼠标那样的 keydown、keyup 等事件，如需获取手柄的按键状态，需要在 raf 循环中使用 navigator.getGamepads 实时获取。
完
笔者给自己的贪食蛇小游戏增加了手柄摇杆控制蛇头方向功能：https://github.com/CarterLi/S...
之前笔者还写过俄罗斯方块之类的，代码找不到了/(ㄒoㄒ)/~~
