如何检测键盘当前无任何按键按下？（游戏方向键控制场景）

你的keyup方法出现bug的核心原因是：当同时按下多个方向键时，松开其中一个就会触发keyup把key置空，但此时还有其他方向键处于按下状态，不符合需求。下面是精准解决这个问题的方案：

核心思路 #

用**集合（Set）**跟踪当前所有按下的方向键，通过游戏循环实时检查集合是否为空：

• 按下方向键时，将按键编码加入集合
• 松开方向键时，从集合中移除对应编码
• 每次游戏循环中，若集合为空则把key置空

完整实现代码 #

let key = "";
// 存储当前按下的方向键编码
const pressedDirectionKeys = new Set();
// 定义需要监听的方向键范围
const targetKeys = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);

// 监听按键按下事件
document.addEventListener('keydown', (e) => {
    if (targetKeys.has(e.code)) {
        pressedDirectionKeys.add(e.code);
        // 可选：更新key为最后按下的方向键
        key = e.code;
    }
});

// 监听按键松开事件
document.addEventListener('keyup', (e) => {
    if (targetKeys.has(e.code)) {
        pressedDirectionKeys.delete(e.code);
    }
});

// 游戏循环（用requestAnimationFrame比setInterval更适配游戏场景）
function updateGameState() {
    // 当所有方向键都未按下时，置空key
    if (pressedDirectionKeys.size === 0) {
        key = "";
    }

    // 这里写入你的游戏逻辑（比如根据key值移动角色）

    requestAnimationFrame(updateGameState);
}

// 启动游戏循环
updateGameState();

方案优势 #

1. 避免多按键冲突：即使同时按下多个方向键，只有当所有方向键都松开时，key才会被置空
2. 精准过滤按键：只跟踪方向键，其他按键操作不会干扰逻辑
3. 性能更优：requestAnimationFrame由浏览器同步刷新节奏，比setInterval更适合游戏动画场景

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