当前位置：首页 > JavaScript

js实现手柄

2026-04-06 07:34:44JavaScript

使用 Gamepad API 检测手柄输入

现代浏览器支持 Gamepad API，可以直接监听手柄的按键和摇杆输入。通过 navigator.getGamepads() 获取连接的手柄列表，监听 gamepadconnected 和 gamepaddisconnected 事件。

js实现手柄

window.addEventListener("gamepadconnected", (e) => {
  console.log("手柄已连接:", e.gamepad);
});

window.addEventListener("gamepaddisconnected", (e) => {
  console.log("手柄已断开:", e.gamepad);
});

function updateGamepad() {
  const gamepads = navigator.getGamepads();
  for (const gamepad of gamepads) {
    if (gamepad) {
      // 处理按键和摇杆输入
      console.log(gamepad.buttons, gamepad.axes);
    }
  }
  requestAnimationFrame(updateGamepad);
}
updateGamepad();

手柄按键和摇杆映射

手柄的按键和摇杆信息存储在 buttons 和 axes 数组中。buttons 数组包含按键状态（pressed 和 value），axes 数组包含摇杆的数值（-1 到 1）。

js实现手柄

const gamepad = navigator.getGamepads()[0];
if (gamepad) {
  // 检测 A 键（通常为 buttons[0]）
  if (gamepad.buttons[0].pressed) {
    console.log("A 键按下");
  }

  // 检测左摇杆水平轴（通常为 axes[0]）
  const leftStickX = gamepad.axes[0];
  if (leftStickX > 0.5) {
    console.log("左摇杆向右");
  }
}

兼容性和备选方案

如果 Gamepad API 不可用，可以考虑使用第三方库如 Joystick.js 或 Gamepad.js。这些库提供了更简单的接口和跨浏览器支持。

// 使用 Joystick.js 示例
const joystick = new Joystick({
  zone: document.getElementById('joystick'),
  mode: 'static',
  size: 100,
  color: '#000000',
});

joystick.on('move', (e) => {
  console.log(e.angle.degree, e.distance);
});

手柄振动功能

部分手柄支持振动功能，可以通过 GamepadHapticActuator 触发。

const gamepad = navigator.getGamepads()[0];
if (gamepad && gamepad.vibrationActuator) {
  gamepad.vibrationActuator.playEffect("dual-rumble", {
    startDelay: 0,
    duration: 1000,
    weakMagnitude: 1.0,
    strongMagnitude: 1.0,
  });
}