如何使用JavaScript实现方向键移动图片及修复移动停止的问题

• 缺少定位样式：img元素默认是static静态定位，left、top这类偏移属性对静态定位元素不生效
• 字符串拼接错误：直接对style.left等属性做+= '5px'操作时，第一次拼接后值为5px，第二次会变成5px5px，属于无效CSS值，导致后续移动失效
• 函数作用域错误：moveUp函数定义在moveDown函数内部，全局作用域无法访问，按上方向键会报错
• 语法错误：moveDown函数缺少闭合的花括号
• 多偏移属性冲突：同时使用left、right、top、bottom控制定位会互相干扰，建议统一用left和top两个属性控制所有方向移动

1. 给img元素添加absolute绝对定位，同时设置初始的left、top属性值
2. 单独维护数值类型的水平、垂直偏移量，每次修改数值后再统一赋值给元素的样式属性，避免字符串拼接异常
3. 修正函数作用域和语法错误，简化移动逻辑统一在键盘事件回调中处理

<body>
  <p>This is filler text</p>
  <!-- 增加定位属性和初始偏移值 -->
  <img src="https://via.placeholder.com/100" length="100" width="100" id="img" style="position: absolute; left: 0; top: 0;" />
</body>

// 维护数值类型的偏移量，初始值和CSS里的left、top对应
let posX = 0, posY = 0;
const img = document.getElementById("img");

document.onkeydown = function(event) {
  switch (event.keyCode) {
    case 37: // 左方向键
      posX -= 5;
      break;
    case 38: // 上方向键
      posY -= 5;
      break;
    case 39: // 右方向键
      posX += 5;
      break;
    case 40: // 下方向键
      posY += 5;
      break;
  }
  // 统一更新元素位置
  img.style.left = posX + 'px';
  img.style.top = posY + 'px';
};

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