JavaScript控制player div在game容器内左右移动功能异常求助

开发者阿泽

2026-9-27

移动功能异常修复

存在的问题点

方向逻辑反转：右箭头触发的逻辑是减小left值，实际会让元素左移，左箭头逻辑相反，完全不符合操作预期
初始值读取失败：player.style.left 只能读取元素内联style属性的值，你在CSS中定义的left属性无法通过该接口获取，首次调用会拿到空字符串，parseInt后得到NaN，导致赋值失效，元素无法移动
无边界限制：未做移动范围判断，元素会移出游戏容器可视区域
CSS无效属性：.game 配置的position: center不是合法属性值，会导致子元素定位基准异常

修复代码

修正后JavaScript代码

let modifier = 50;
let player = document.getElementById('player');
let gameContainer = document.querySelector('.game');
const gameWidth = gameContainer.clientWidth;
const playerWidth = player.offsetWidth;

window.addEventListener('keydown', (event) => {
  // 读取计算后样式，拿到CSS中定义的初始left值
  const currentLeft = parseInt(window.getComputedStyle(player).left);
  let newLeft;
  switch (event.key) {
    case 'ArrowRight':
      newLeft = currentLeft + modifier;
      // 右边界限制：不可超出容器宽度减去自身宽度
      newLeft = Math.min(newLeft, gameWidth - playerWidth);
      player.style.left = `${newLeft}px`;
      break;
    case 'ArrowLeft':
      newLeft = currentLeft - modifier;
      // 左边界限制：不可小于0
      newLeft = Math.max(newLeft, 0);
      player.style.left = `${newLeft}px`;
      break;
  }
});

修正后.game的CSS配置

.game {
  width: 800px;
  height: 500px;
  position: relative;
  border: 14px solid darkblue;
  border-radius: 5px;
  margin-left: 300px;
  margin-top: -100px;
  background-color: black;
}