JavaScript键盘事件问题：多键按压后单键失效无法移动Canvas图像

你的问题核心出在两个地方：

• 松开按键时直接把speedX和speedY设为0，完全忽略了其他还在按下的键
• 按下按键时只针对当前单个按键设置速度，没有根据所有已按下的键的组合动态计算速度

下面是修复后的代码逻辑，思路是每次按键状态变化（按下/松开）时，重新遍历所有按键状态，计算当前应该有的移动速度：

首先确保初始化按键状态对象：

let keysPressed = {};

然后修改按键事件处理函数：

function keyPressed(event) {
  keysPressed[event.key] = true;
  updateMovementSpeed(); // 更新速度
}

function stopMovement(event) {
  keysPressed[event.key] = false;
  updateMovementSpeed(); // 更新速度
}

新增一个专门计算移动速度的函数，它会根据所有按下的键来动态调整：

function updateMovementSpeed() {
  let speedX = 0;
  let speedY = 0;

  // 计算水平方向速度
  if (keysPressed['ArrowLeft']) speedX -= 5;
  if (keysPressed['ArrowRight']) speedX += 5;

  // 计算垂直方向速度
  if (keysPressed['ArrowUp']) speedY -= 5;
  if (keysPressed['ArrowDown']) speedY += 5;

  // 斜向移动时归一化速度（避免斜着走比直线快）
  if (speedX !== 0 && speedY !== 0) {
    const diagonalSpeed = 5 / Math.sqrt(2); // 约等于3.535，和你之前的3.5一致
    speedX = speedX > 0 ? diagonalSpeed : -diagonalSpeed;
    speedY = speedY > 0 ? diagonalSpeed : -diagonalSpeed;
  }

  playerPetSelected.speedX = speedX;
  playerPetSelected.speedY = speedY;
}

为什么这样能解决问题？ #

原来的代码在松开任意一个键时直接清零速度，不管其他键是否还按着。现在每次按键状态变化，都会重新检查所有按键：

• 比如先按左+下，松开下后，函数会检测到左还在按下，自动把速度设为左方向的-5
• 斜向移动的速度计算也不用写一堆重复的if判断，逻辑更简洁，还能保证速度一致

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