Gamepad API是W3C标准接口，原生支持主流手柄，需通过navigator.getGamepads()轮询或监听gamepadconnected事件获取输入，不能用keydown监听；需处理死区、多手柄、跨浏览器映射差异及断连状态。
有直接关系，而且是现代网页游戏控制的主流方案之一。HTML 本身不“自带”手柄，但通过 Gamepad API，浏览器原生支持 Xbox、PS、Switch Pro 等绝大多数 USB/蓝牙游戏手柄，无需插件、不依赖第三方服务。
Gamepad API 是什么，为什么不能直接用 keydown 监听手柄
Gamepad API 是 W3C 标准接口，提供对连接手柄的实时读取能力——包括按钮状态、摇杆轴值（axes）、震动控制（hapticActuators）等。它和键盘事件完全隔离：手柄按下不会触发 keydown，keydown 也永远收不到手柄信号。
常见错误现象：
- 写了
document.addEventListener('keydown', ...)却发现手柄按键毫无反应 - 误以为手柄会模拟方向键或 WASD，结果在 Chrome/Firefox 中始终无输入
原因很简单：Gamepad API 是独立通道，必须显式调用 navigator.getGamepads() 获取设备列表，并持续轮询或监听连接事件。
立即学习“前端免费学习笔记（深入）”；
如何正确检测并读取手柄输入（含兼容性要点）
现代浏览器（Chrome 35+、Firefox 29+、Edge 79+、Safari 16.4+）均支持，但 Safari 对蓝牙手柄支持较晚，且不支持震动；部分安卓 WebView 仍需手动启用 flag。
实操建议：
- 用
window.addEventListener('gamepadconnected', ...)捕获首次连接，避免轮询时漏掉刚插入的手柄 - 必须用
requestAnimationFrame而非setInterval更新状态，否则轴值抖动严重、响应延迟明显 -
navigator.getGamepads()返回的是固定长度数组（通常 4 个槽位），空位为null，不能用.length判断有效设备数，要逐项判空 - 摇杆轴值范围是
[-1, 1]，但存在死区（dead zone），Xbox 手柄中心偏移常达 ±0.15，建议手动过滤：Math.abs(axis) > 0.2
示例片段（精简版）：
function pollGamepad() {
const gamepads = navigator.getGamepads();
for (const pad of gamepads) {
if (!pad) continue;
// 左摇杆 X/Y 控制移动
const x = Math.abs(pad.axes[0]) > 0.2 ? pad.axes[0] : 0;
const y = Math.abs(pad.axes[1]) > 0.2 ? pad.axes[1] : 0;
player.vx = x * 5;
player.vy = y * 5;
}
requestAnimationFrame(pollGamepad);
}
requestAnimationFrame(pollGamepad);要不要用 gamepad.js 这类封装库
取决于项目复杂度。原生 Gamepad API 足够轻量、无依赖，适合简单动作控制（如方向移动、跳跃）；但遇到多手柄管理、按钮长按识别、震动调度、跨浏览器轴映射不一致（比如 PS4 的 L2/R2 在 Firefox 中是 buttons[6]，Chrome 中是 buttons[8]）等问题时，gamepad.js 这类库能省掉大量胶水代码。
关键差异点：
-
gamepad.js自动做轴标准化（统一映射到 leftStick/rightStick）、按钮语义化（'a'/'x'而非索引号） - 提供
on('pressed')/on('held')分层事件，避免手动写计时器判断长按 - 内置震动封装：
gamepad.rumble(0.5, 0.3, 200)比原生gamepad.hapticActuators[0].pulse(0.5, 200)更直观 - npm 安装即可用，但会增加约 8KB gzip 后体积
虚拟手柄（触屏场景）和物理手柄不能混用同一套逻辑
移动端没有物理手柄时，常用纯 CSS + JS 实现虚拟摇杆（如圆形容器内拖动小球），其输出是相对坐标或角度，不是标准 axes 值。强行把虚拟摇杆的 {x: 0.7, y: -0.3} 塞进原生 Gamepad 处理函数，会导致行为错乱。
推荐做法：
- 抽象一层输入层（InputManager），统一输出
{leftStick: {x, y}, buttons: {jump: true}} - 物理手柄走
Gamepad API解析，虚拟手柄走触摸事件解析，最后都喂给同一套游戏逻辑 - 不要在渲染循环里直接调用
getGamepads()+ 虚拟摇杆计算，容易因帧率波动导致输入卡顿
真正容易被忽略的是：手柄断连后，navigator.getGamepads() 仍返回旧引用，按钮状态不会自动清零。必须监听 gamepaddisconnected 并主动置空缓存或重置玩家输入状态，否则可能出现“手柄拔了角色还在狂奔”的情况。
