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