游戏按键检测函数无法返回true的问题排查及优化咨询

问题原因分析 #

你的代码存在两个核心问题：

• 异步回调逻辑错误：Key.isDown方法里每次调用都会给document添加新的keypress监听，但监听的回调是异步触发的——调用Key.isDown('Space')时，函数会立即执行完addEventListener就结束，不会等待按键事件触发，所以这个方法实际没有返回值（默认返回undefined），自然永远无法进入if分支打印true。
• 事件类型选错：keypress事件主要用于捕获可打印字符输入，对空格（Space）这类非字符按键的兼容性很差，很多场景下不会触发该事件。

高效实现方案 #

正确思路是维护一个按键状态集合，通过keydown事件标记按键为按下状态，keyup事件标记为释放状态，isDown方法直接查询这个集合的状态即可。这种方式只需绑定一次事件，性能更优，也能准确跟踪按键状态。

修正后的代码：

const Key = {
  // 存储当前按下的按键code
  _pressed: new Set(),
  
  init() {
    // 仅绑定一次事件监听
    document.addEventListener('keydown', (event) => {
      this._pressed.add(event.code);
    });
    
    document.addEventListener('keyup', (event) => {
      this._pressed.delete(event.code);
    });
  },
  
  isDown(name) {
    // 直接查询按键状态
    return this._pressed.has(name);
  }
};

// 初始化事件监听
Key.init();

function checkKeys(){
  if(Key.isDown('Space')){
    console.log('true');
  }
};

function animate() {
  requestAnimationFrame(animate);
  checkKeys();
};

// 启动动画循环
animate();

代码说明 #

• _pressed用Set存储按键状态，查询、添加、删除操作都是O(1)效率，比普通对象更适合做状态跟踪。
• init方法在程序启动时调用一次，避免重复绑定事件导致的性能浪费。
• isDown同步返回按键状态，完美适配requestAnimationFrame的循环检测逻辑。

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