如何用JavaScript实现2D游戏角色移动？Yoshi移动方向异常求助

问题原因 #

1. 未阻止键盘默认行为：按下方向键时，浏览器会触发页面滚动的默认动作，导致offsetTop/offsetLeft的实时计算出现偏差——视觉上就表现为按上键时Yoshi“向下移动”、按左键时“向右移动”。
2. 依赖offset系列属性不稳定：offsetLeft/offsetTop会受页面滚动、父元素布局影响，多次触发事件时容易出现计算误差。

修复代码 #

JavaScript（核心修改）

// 用独立变量存储当前位置，避免依赖offset属性
let posX = 4;
let posY = 4;
const yoshi = document.getElementById('yoshi');

document.onkeydown = (e) => {
  // 阻止方向键的默认滚动行为
  e.preventDefault();

  switch(e.keyCode) {
    case 37: // 左键
      posX -= 5;
      yoshi.style.left = `${posX}px`;
      break;
    case 38: // 上键
      posY -= 5;
      yoshi.style.top = `${posY}px`;
      break;
    case 39: // 右键
      posX += 5;
      yoshi.style.left = `${posX}px`;
      break;
    case 40: // 下键
      posY += 5;
      yoshi.style.top = `${posY}px`;
      break;
  }
};

CSS（优化容器定位）

#quarto {
  position: relative;
  width: 800px; /* 游戏容器宽度 */
  height: 600px; /* 游戏容器高度 */
  overflow: hidden; /* 限制Yoshi在容器内移动 */
}

#yoshi {
  position: absolute; /* 改为绝对定位，相对于父容器#quarto */
  width: 80px;
  height: 80px;
  left: 4px;
  top: 4px;
}

HTML（无需修改）

<body>
  <div id="quarto">
    <img src="assents/image/yoshi.png" alt="yoshi" id="yoshi" />
  </div>
</body>

关键修复点说明 #

• 用posX/posY变量存储位置，避免每次读取offsetLeft/offsetTop带来的不稳定问题；
• 添加e.preventDefault()彻底阻止方向键触发的页面滚动，消除布局偏移干扰；
• 将Yoshi改为absolute定位，父容器设为relative，让移动范围严格限制在游戏容器内，更符合2D游戏的场景需求。

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