Top Down视角游戏玩家斜向移动长按后抖动问题求助

我之前碰到过完全一样的情况！你的问题根源在于用数组跟踪按键状态的方式，结合键盘的自动重复机制，会导致按键状态出现意外的波动，进而引发移动抖动。

问题原因分析 #

当你长按两个按键（比如W+D）时，系统会先等待约1秒的延迟，然后开始重复触发keydown事件。虽然你的代码尝试通过!keys.includes(event.keyCode)避免重复添加键码，但数组的splice操作在处理keyup事件（或极端情况下的重复事件）时，可能会出现微小的状态误判；再加上键盘重复事件的触发频率和requestAnimationFrame的帧率不完全同步，就会导致某几帧里只有一个方向的移动被执行，视觉上就表现为抖动。

修复方案 #

改用对象来跟踪按键状态是最可靠的解决方式，每个按键对应一个布尔值，直接映射按下/抬起状态，完全不受键盘重复事件的干扰。另外还可以顺便修复斜向移动速度过快的问题（斜向移动时x/y各加5，实际速度会比单方向快√2倍）。

修改后的完整代码如下：

gameCanvas = document.getElementById("gameCanvas");
gameCanvasContext = gameCanvas.getContext("2d");
gameCanvas.width = window.innerWidth;
gameCanvas.height = window.innerHeight;

window.addEventListener("keydown", handleKeyAction);
window.addEventListener("keyup", handleKeyAction);

playerPosition = {xPosition: gameCanvas.width / 2, yPosition: gameCanvas.height / 2};

// 用对象替代数组，直接记录每个按键的状态
var keys = {
  87: false, // W
  65: false, // A
  83: false, // S
  68: false  // D
};

function handleKeyAction(event) {
  // 只处理我们关心的按键
  if (keys.hasOwnProperty(event.keyCode)) {
    // 按下设为true，抬起设为false
    keys[event.keyCode] = event.type === "keydown";
  }
}

function movePlayer() {
  const baseSpeed = 5;
  let dx = 0;
  let dy = 0;

  // 根据按键状态计算移动向量
  if(keys[87]) dy -= baseSpeed;
  if(keys[83]) dy += baseSpeed;
  if(keys[65]) dx -= baseSpeed;
  if(keys[68]) dx += baseSpeed;

  // 可选：归一化向量，保证斜向移动速度和单方向一致
  if (dx !== 0 && dy !== 0) {
    const normalizeFactor = Math.sqrt(2) / 2;
    dx *= normalizeFactor;
    dy *= normalizeFactor;
  }

  // 更新玩家位置
  playerPosition.xPosition += dx;
  playerPosition.yPosition += dy;
}

function drawPlayer() {
  gameCanvasContext.beginPath();
  gameCanvasContext.fillStyle = "#000000";
  gameCanvasContext.arc(playerPosition.xPosition, playerPosition.yPosition, 15, 0, Math.PI * 2);
  gameCanvasContext.fill();
  gameCanvasContext.closePath();
}

function animate() {
  gameCanvasContext.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
  movePlayer();
  drawPlayer();
  requestAnimationFrame(animate);
}

animate();

为什么这个方案有效 #

1. 稳定的按键状态跟踪：对象的键值对直接记录每个按键的状态，不管键盘重复触发多少次keydown事件，都会保持状态为true，keyup时准确设为false，不会出现数组操作带来的状态波动。
2. 每帧准确计算移动：每帧都会读取所有按键的状态，计算完整的移动向量，保证斜向移动时x/y方向的移动始终同步，不会出现单方向丢失的情况。
3. 可选的速度归一化：解决了斜向移动速度过快的问题，让玩家的移动速度在所有方向上保持一致，提升游戏体验。

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