如何用Gamepad API实现浏览器游戏的手柄支持？

let connectedGamepads = {}; // 用来存储当前连接的手柄，以索引为键

window.addEventListener("gamepadconnected", (event) => {
  console.log(`手柄连接了: ${event.gamepad.id} (索引: ${event.gamepad.index})`);
  connectedGamepads[event.gamepad.index] = event.gamepad;
  // 可以在这里更新UI，比如显示“手柄已连接”
  // 确保轮询循环已经启动
  if (!animationFrameId) {
    animationFrameId = requestAnimationFrame(updateGamepads);
  }
});

window.addEventListener("gamepaddisconnected", (event) => {
  console.log(`手柄断开了: ${event.gamepad.id} (索引: ${event.gamepad.index})`);
  delete connectedGamepads[event.gamepad.index];
  // 更新UI，提示手柄断开
  // 如果所有手柄都断开了，可以考虑停止轮询
  if (Object.keys(connectedGamepads).length === 0) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }
});

let animationFrameId = null; // 用于控制 requestAnimationFrame

function updateGamepads() {
  const gamepadsArray = navigator.getGamepads(); // 获取所有手柄的最新状态

  for (let i = 0; i < gamepadsArray.length; i++) {
    const gamepad = gamepadsArray[i];
    if (gamepad && connectedGamepads[gamepad.index]) { // 确保手柄存在且已连接
      // 更新 connectedGamepads 中的手柄对象，确保它始终是最新状态
      connectedGamepads[gamepad.index] = gamepad;
      handleGamepadInput(gamepad);
    }
  }
  animationFrameId = requestAnimationFrame(updateGamepads); // 持续循环
}

function handleGamepadInput(gamepad) {
  // 举个例子，处理第一个按键（通常是A/X按钮）
  // GamepadButton对象有 pressed, value, touched 属性
  if (gamepad.buttons[0] && gamepad.buttons[0].pressed) {
    // console.log(`手柄 ${gamepad.index} 的按钮 0 按下了！`);
    // 触发游戏里的跳跃或者射击动作，注意避免连续触发
    // 可以通过存储上一次按键状态来判断是“按下”还是“按住”
    if (!gamepad.buttons[0]._wasPressed) { // 自定义属性，记录上次状态
      console.log(`手柄 ${gamepad.index} 的按钮 0 刚刚按下！`);
      // 触发一次性动作，比如跳跃
    }
    gamepad.buttons[0]._wasPressed = true;
  } else if (gamepad.buttons[0]) {
    gamepad.buttons[0]._wasPressed = false;
  }

  // 处理左摇杆X轴（通常是0）和Y轴（通常是1）
  const leftStickX = gamepad.axes[0];
  const leftStickY = gamepad.axes[1];
  const deadZone = 0.15; // 增加一个死区，避免摇杆轻微漂移
  if (Math.abs(leftStickX) > deadZone || Math.abs(leftStickY) > deadZone) {
    // console.log(`手柄 ${gamepad.index} 左摇杆: X=${leftStickX.toFixed(2)}, Y=${leftStickY.toFixed(2)}`);
    // 根据摇杆方向控制角色移动，比如：
    // player.move(leftStickX, leftStickY);
  }

  // 更多按键和摇杆的处理...
}

// 启动轮询（如果已有手柄连接，或者等待连接事件触发）
// 首次加载页面时，可能已经有手柄连接了，需要手动检查一次
if (navigator.getGamepads().some(g => g !== null)) {
  for (let i = 0; i < navigator.getGamepads().length; i++) {
    const gp = navigator.getGamepads()[i];
    if (gp) {
      connectedGamepads[gp.index] = gp;
    }
  }
  if (Object.keys(connectedGamepads).length > 0) {
    animationFrameId = requestAnimationFrame(updateGamepads);
  }
}

function handleGamepadInput(gamepad) {
  // 打印所有按下的按键
  gamepad.buttons.forEach((button, index) => {
    if (button.pressed) {
      console.log(`手柄 ${gamepad.index}: 按钮 ${index} 按下 (值: ${button.value.toFixed(2)})`);
    }
  });

  // 打印所有摇杆的当前值
  gamepad.axes.forEach((axis, index) => {
    if (Math.abs(axis) > 0.05) { // 稍微大一点的死区，减少不必要的打印
      console.log(`手柄 ${gamepad.index}: 摇杆 ${index} 轴值: ${axis.toFixed(2)}`);
    }
  });
  // ... 其他游戏逻辑
}

function triggerGamepadVibration(gamepad, duration = 200, strongMagnitude = 1.0, weakMagnitude = 1.0) {
  if (gamepad && gamepad.hapticActuators && gamepad.hapticActuators.length > 0) {
    const actuator = gamepad.hapticActuators[0]; // 通常只有一个或第一个
    // playEffect方法接受一个对象，定义震动效果
    actuator.playEffect("dual-rumble", {
      startDelay: 0,       // 延迟多久开始震动
      duration: duration,  // 震动持续时间（毫秒）
      weakMagnitude: weakMagnitude, // 弱震动马达强度 (0.0 - 1.0)
      strongMagnitude: strongMagnitude // 强震动马达强度 (0.0 - 1.0)
    }).catch(error => {
      console.warn("手柄震动失败:", error);
      // 某些手柄或浏览器可能不支持特定效果
    });
  } else {
    console.log("当前手柄不支持震动功能或未连接。");
  }
}

// 示例：当玩家角色受到伤害时触发震动
// 假设玩家1手柄是 connectedGamepads[0]
// triggerGamepadVibration(connectedGamepads[0], 300, 0.8, 0.5);