求助：实现角色键盘控制平滑移动，解决按键后持续位移问题

安全阿岳

2026-8-13

实现键盘控制角色平滑移动的正确方案

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

每次调用update()都会重复绑定keyup事件，导致同一个按键抬起时触发多次位置修改，所以角色会"移动越来越远"
keyup事件仅在按键抬起时触发一次，无法实现按住按键持续移动的平滑效果

正确实现思路

用一个对象记录当前按下的按键状态
绑定keydown和keyup事件，更新按键状态
在动画循环中（通过requestAnimationFrame驱动），根据按键状态持续修改角色位置，实现平滑移动

完整代码示例

// 记录按键状态
const keys = {
  w: false,
  a: false,
  s: false,
  d: false
};

// 角色位置
let myX = 0;
let myY = 0;
// 移动速度（可根据需求调整）
const moveSpeed = 2;

// 绑定键盘事件
window.addEventListener('keydown', (e) => {
  if (keys.hasOwnProperty(e.key.toLowerCase())) {
    keys[e.key.toLowerCase()] = true;
  }
});

window.addEventListener('keyup', (e) => {
  if (keys.hasOwnProperty(e.key.toLowerCase())) {
    keys[e.key.toLowerCase()] = false;
  }
});

// 动画循环函数
function update() {
  // 根据按键状态更新位置
  if (keys.w) {
    myY -= moveSpeed; // 若场景Y轴向下，可改为 +=
  }
  if (keys.s) {
    myY += moveSpeed;
  }
  if (keys.a) {
    myX -= moveSpeed;
  }
  if (keys.d) {
    myX += moveSpeed;
  }

  // 此处添加角色渲染逻辑，比如更新DOM位置或Canvas绘制
  // 示例：document.getElementById('player').style.transform = `translate(${myX}px, ${myY}px)`;

  // 持续调用动画循环
  requestAnimationFrame(update);
}

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