HTML5 Gamepad API TypeError求助：null对象不可迭代

错误原因 #

• 报错行const [gp] = navigator.getGamepads()[0]存在两个问题：
  1. 当手柄未连接时，navigator.getGamepads()[0]返回null，而你试图对null进行数组解构操作，但null不是可迭代对象，因此触发类型错误。
  2. 代码执行时机错误：页面加载时直接调用navigator.getGamepads()，此时手柄大概率还未完成连接，无法获取有效手柄实例。

修正方案 #

方案1：连接时获取初始摇杆轴状态

将获取手柄信息的逻辑放到gamepadconnected事件回调内，确保只有手柄连接成功后才执行相关操作：

window.addEventListener("gamepadconnected", (e) => {
    const gp = e.gamepad;
    console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
        gp.index, gp.id, gp.buttons.length, gp.axes.length);
    // 打印初始摇杆轴位置
    console.log("初始摇杆轴位置:", gp.axes);
});

方案2：实时监听摇杆轴变化

如果需要持续获取摇杆的动态位置，使用requestAnimationFrame循环更新手柄状态：

window.addEventListener("gamepadconnected", (e) => {
    const gp = e.gamepad;
    console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
        gp.index, gp.id, gp.buttons.length, gp.axes.length);
    
    // 循环监听摇杆轴状态
    function updateGamepadState() {
        // 重新获取手柄实例（手柄状态会动态更新）
        const currentGp = navigator.getGamepads()[gp.index];
        if (currentGp) {
            console.log("当前摇杆轴位置:", currentGp.axes);
        }
        requestAnimationFrame(updateGamepadState);
    }
    updateGamepadState();
});

// 可选：监听手柄断开事件
window.addEventListener("gamepaddisconnected", (e) => {
    console.log("Gamepad disconnected:", e.gamepad.id);
});

注意事项 #

• 部分浏览器要求用户先与页面产生交互（如点击页面）后，才能访问游戏手柄API，测试时请先点击页面再连接手柄。
• gp.axes返回数组，通常前两个元素对应左摇杆的X/Y轴，后两个对应右摇杆的X/Y轴，取值范围为-1到1。

内容的提问来源于stack exchange，提问作者beackers