HTML通过Gamepad API支持手柄，需监听gamepadconnected事件获取设备，navigator.getGamepads()返回快照数组，axes和buttons结构需动态判断并处理死区。
HTML 本身不直接支持手柄，但现代浏览器通过 Gamepad API 提供了完整的手柄接入能力——只要用户连接了兼容设备（如 Xbox、PlayStation 或标准 HID 手柄），就能在网页中读取按钮、摇杆和触发器状态。
如何检测并连接手柄（navigator.getGamepads() 与 gamepadconnected）
手柄不会自动“注册”，必须监听连接事件或轮询检测。直接调用 navigator.getGamepads() 返回的数组可能全为 null，尤其在页面刚加载时——这是最常被忽略的前提。
- 必须监听
gamepadconnected事件来捕获首次接入，否则会错过初始化时机 -
navigator.getGamepads()返回的是快照数组，索引对应手柄编号（0、1…），但已断开的手柄位置仍保留为null，不能靠数组长度判断当前活跃数 - 部分浏览器（如 Safari）需用户交互（如点击）后才允许访问手柄数据，否则返回空数组
示例：简单连接日志
window.addEventListener('gamepadconnected', (e) => {
console.log('手柄已连接:', e.gamepad.id);
});
window.addEventListener('gamepaddisconnected', (e) => {
console.log('手柄已断开:', e.gamepad.id);
});
读取摇杆与按钮（axes 和 buttons 数组结构）
Gamepad 对象的 axes 是一维数组，顺序固定：[leftX, leftY, rightX, rightY]（常见布局），值范围是 -1.0 到 1.0；buttons 同样是数组，每个元素是 {pressed: boolean, value: number}，其中 value 对于模拟按钮（如 LT/RT）是 0–1 的模拟值，数字键则通常为 0 或 1。
立即学习“前端免费学习笔记（深入）”；
- 不要假设所有手柄都有 4 个轴——某些蓝牙手柄只暴露 2 轴（仅左摇杆），需用
gamepad.axes.length动态判断 - 摇杆存在死区（dead zone），原生值在 ±0.15 内常抖动，建议手动过滤：
Math.abs(value) -
buttons索引不跨设备统一：Xbox 手柄的 A 键是索引 0，而 PlayStation 的 × 键是索引 1——必须按实际gamepad.id字符串识别型号，或提供映射配置
为什么手柄输入延迟高或断续？（requestAnimationFrame 与轮询频率）
手柄状态不是实时推送的，浏览器只在每次渲染帧前更新一次 getGamepads() 快照。若你在 setTimeout 或事件回调里反复调用它，反而可能读到过期数据。
- 必须在
requestAnimationFrame循环中调用navigator.getGamepads()，才能保证与渲染同步、延迟最低 - 避免每帧都遍历全部 4 个插槽——先检查
gamepad !== null，再处理活跃手柄 - 移动端 Chrome 对蓝牙手柄支持不稳定，常出现连接后无响应，需提示用户尝试有线模式或重启蓝牙
典型循环结构：
function pollGamepads() {
const gamepads = navigator.getGamepads();
for (let i = 0; i < gamepads.length; i++) {
const gp = gamepads[i];
if (gp) handleInput(gp); // 自定义处理函数
}
requestAnimationFrame(pollGamepads);
}
pollGamepads();
手柄输入看似简单，真正难的是跨设备兼容性——同一段代码在 Windows Chrome 上跑得飞起，在 macOS Safari 或 Android 上可能连 gamepadconnected 都不触发。别依赖“应该能行”，每次上线前至少用三种物理手柄实测一遍连接与轴映射。
