"Gamepad API：手柄输入与映射实践"

---

title: "Gamepad API：手柄输入与映射实践"

keywords:

• Gamepad
• navigator.getGamepads
• axes
• buttons
• 振动

description: "介绍 Gamepad API 的连接与输入读取、轴与按钮映射、事件与轮询策略，提供示例与兼容建议。"

categories:

• 应用软件
• 编程开发

---

概述

Gamepad API 允许读取手柄状态，包括按钮与轴。适用于游戏与交互应用，需要在用户交互后启动轮询，处理不同设备映射差异。

示例

window.addEventListener('gamepadconnected', e => {
  const loop = () => {
    const pads = navigator.getGamepads()
    const gp = pads[e.gamepad.index]
    if (gp) {
      const x = gp.axes[0]
      const y = gp.axes[1]
      const pressed = gp.buttons[0].pressed
    }
    requestAnimationFrame(loop)
  }
  loop()
})

工程建议

• 映射与适配：为主流设备提供配置与校准，避免硬编码索引。
• 事件与轮询：连接事件用于启动，主循环用 requestAnimationFrame 读取，降低延迟与功耗。
• 兼容：不支持时提供键盘/触控回退；处理权限与安全上下文。

参考与验证

• MDN Gamepad 文档：https://developer.mozilla.org/docs/Web/API/Gamepad_API
• W3C Gamepad 规范：https://www.w3.org/TR/gamepad/
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/gamepad/