如何使用JavaScript实现游戏暂停菜单 监听按键触发游戏暂停

最简便的实现方式是基于全局keydown事件做状态切换，核心是加防抖锁避免长按重复触发，同时和游戏的暂停/恢复逻辑绑定即可，以下是可直接复用的实现：

基础可用版本 #

// 全局状态维护
let isGamePaused = false;
let pauseKeyLock = false; // 防抖锁，防止单次按键多次触发

window.addEventListener('keydown', (event) => {
  // 这里用Esc作为触发键，也可以替换为'p'等你需要的键值
  if (event.key !== 'Escape' || pauseKeyLock) return;

  // 触发状态切换
  pauseKeyLock = true;
  isGamePaused = !isGamePaused;

  if (isGamePaused) {
    // 暂停逻辑示例：按需替换为你的游戏逻辑
    cancelAnimationFrame(gameLoopId); // 停止游戏主循环
    document.querySelector('.pause-menu').style.display = 'block'; // 显示暂停菜单
  } else {
    // 恢复逻辑示例
    requestAnimationFrame(gameLoop); // 重启主循环
    document.querySelector('.pause-menu').style.display = 'none'; // 隐藏暂停菜单
  }

  // 200ms后解锁，避免长按重复触发
  setTimeout(() => {
    pauseKeyLock = false;
  }, 200);
});

优化建议 #

• 如果游戏是在固定canvas容器内运行，建议把事件绑定到容器元素而非全局window，避免切出游戏窗口后按键误触发
• 如果暂停菜单内有输入框等可交互元素，可加判断跳过触发：if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') return
• 如果你用的是Phaser、Cocos等游戏框架，优先用框架内置的输入监听API，性能和兼容性更好，比如Phaser中可以直接用this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ESC)绑定事件

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