JS游戏开发：如何实现两个对象同时移动？

你的问题根源在于keypress事件是单次触发的——每次只能响应一个按键操作，所以同时按住两个键时，只有最后触发的那个按键会生效，另一个坦克自然就停了。用keydown和keyup事件记录按键状态，再配合动画循环就能实现多键同时控制。

具体实现步骤：

• 用一个对象保存当前按下的按键状态
• 按下按键时标记为true，松开时标记为false
• 在动画循环里根据按键状态持续更新坦克位置，而不是在事件回调里单次修改

替换你原来的代码，改成这样：

// 保存按键状态的对象
const keys = {};

// 监听按键按下事件
document.addEventListener('keydown', (e) => {
  keys[e.keyCode] = true;
});

// 监听按键松开事件
document.addEventListener('keyup', (e) => {
  keys[e.keyCode] = false;
});

// 动画循环，用requestAnimationFrame实现平滑更新
function animate() {
  // 根据按键状态更新坦克1位置
  if (keys[97]) { // A键
    tank.x -= 10;
  }
  if (keys[100]) { // D键
    tank.x += 10;
  }

  // 根据按键状态更新坦克2位置
  if (keys[52]) { // 4键
    tank2.x -= 10;
  }
  if (keys[54]) { // 6键
    tank2.x += 10;
  }

  f_draw();
  requestAnimationFrame(animate);
}

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

这样修改后，你可以同时按住A/D和4/6键，两个坦克就能同时移动了。另外注意：keyCode已经被标记为废弃，如果你想兼容新浏览器，可以换成e.key（比如判断e.key === 'a'、e.key === '4'），不过用keyCode在游戏场景里暂时还是能用的。

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