浏览器JS游戏手柄API？

gamepadconnected

gamepaddisconnected

let gamepads = {}; // 用于存储已连接的手柄

window.addEventListener("gamepadconnected", (event) => {
    const gamepad = event.gamepad;
    console.log(`游戏手柄 ${gamepad.index}: ${gamepad.id} 已连接.`);
    gamepads[gamepad.index] = gamepad;
    // 可以在这里启动游戏循环或UI更新
    startGamepadPolling();
});

window.addEventListener("gamepaddisconnected", (event) => {
    const gamepad = event.gamepad;
    console.log(`游戏手柄 ${gamepad.index}: ${gamepad.id} 已断开.`);
    delete gamepads[gamepad.index];
    // 检查是否还有其他手柄，如果没有，可以停止游戏循环
    if (Object.keys(gamepads).length === 0) {
        stopGamepadPolling();
    }
});

requestAnimationFrame

let animationFrameId = null;

function startGamepadPolling() {
    if (animationFrameId !== null) return; // 避免重复启动

    function pollGamepads() {
        // 每次调用 getGamepads() 都会返回最新的手柄状态数组
        const currentGamepads = navigator.getGamepads();
        for (const index in gamepads) {
            const gamepad = currentGamepads[index];
            if (gamepad) {
                // 处理手柄输入
                handleGamepadInput(gamepad);
            }
        }
        animationFrameId = requestAnimationFrame(pollGamepads);
    }
    animationFrameId = requestAnimationFrame(pollGamepads);
}

function stopGamepadPolling() {
    if (animationFrameId !== null) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
    }
}

function handleGamepadInput(gamepad) {
    // 示例：检测第一个按钮（通常是A/X按钮）是否被按下
    if (gamepad.buttons[0] && gamepad.buttons[0].pressed) {
        console.log(`手柄 ${gamepad.id} 的按钮 0 被按下！`);
    }

    // 示例：检测左摇杆X轴（通常是0）的输入
    const leftStickX = gamepad.axes[0];
    if (Math.abs(leftStickX) > 0.1) { // 设定一个死区，避免轻微漂移
        console.log(`手柄 ${gamepad.id} 左摇杆X轴: ${leftStickX}`);
    }

    // 你可以根据游戏逻辑，将这些输入映射到角色的移动、动作等
}

Gamepad API

gamepadconnected

Gamepad

Gamepad

// 示例：在gamepadconnected事件中存储手柄
let activeGamepads = new Map(); // 使用Map更灵活

window.addEventListener("gamepadconnected", (event) => {
    const gp = event.gamepad;
    console.log(`Gamepad connected at index ${gp.index}: ${gp.id}. ${gp.buttons.length} buttons, ${gp.axes.length} axes.`);
    activeGamepads.set(gp.index, gp);
    // 此时，你可以启动一个游戏循环来持续读取这个手柄的状态
    if (!pollingActive) { // 确保只启动一次轮询
        startPolling();
    }
});

window.addEventListener("gamepaddisconnected", (event) => {
    const gp = event.gamepad;
    console.log(`Gamepad disconnected from index ${gp.index}: ${gp.id}.`);
    activeGamepads.delete(gp.index);
    if (activeGamepads.size === 0) {
        stopPolling(); // 如果所有手柄都断开了，停止轮询以节省资源
    }
});

navigator.getGamepads()

requestAnimationFrame

navigator.getGamepads()

buttons

axes

let pollingActive = false;
let animationFrameId = null;

function startPolling() {
    pollingActive = true;
    function gameLoop() {
        const gamepadsSnapshot = navigator.getGamepads();
        activeGamepads.forEach((gp, index) => {
            const latestGp = gamepadsSnapshot[index];
            if (latestGp) { // 确保手柄仍然存在
                // 处理按钮状态
                latestGp.buttons.forEach((button, btnIndex) => {
                    if (button.pressed) {
                        // console.log(`Gamepad ${latestGp.id} Button ${btnIndex} pressed.`);
                        // 触发游戏中的相应动作
                    }
                });
                // 处理摇杆状态
                latestGp.axes.forEach((axisValue, axisIndex) => {
                    if (Math.abs(axisValue) > 0.1) { // 设定死区
                        // console.log(`Gamepad ${latestGp.id} Axis ${axisIndex}: ${axisValue}`);
                        // 映射到角色移动等
                    }
                });
            }
        });
        animationFrameId = requestAnimationFrame(gameLoop);
    }
    animationFrameId = requestAnimationFrame(gameLoop);
}

function stopPolling() {
    pollingActive = false;
    if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
    }
}

Gamepad

Gamepad

gamepad.buttons[0].pressed

gamepad.axes[0]

mapping: "standard"

mapping

id