游戏双角色X轴联动问题求助：如何实现独立水平移动？

我开发的游戏里有两个图片角色，通过修改margin属性实现移动，但出现了X轴联动问题：移动其中一个角色时，另一个也会跟着水平移动。我需要让两个角色能独立移动，保证游戏正常运行。

试过把角色定位改成fixed，联动问题消失了，但角色没法上下移动。已经检查过全部代码，两个角色的变量没有重叠情况。

代码如下：

let img1 = document.querySelector(`.img1`)
let img2 = document.querySelector(`.img2`)
let score1 = 40
let score2 = 40
document.addEventListener(`keydown`, function(e) {
  if (e.key === 'ArrowRight') {
    score1 += 0.5
    img1.style.marginLeft = `${score1}%`
  }
  if (e.key === 'ArrowLeft') {
    score1 -= 0.5
    img1.style.marginLeft = `${score1}%`
  }
  if (e.key === 'd') {
    score2 += 0.5
    img2.style.marginLeft = `${score2}%`
  }
  if (e.key === 'a') {
    score2 -= 0.5
    img2.style.marginLeft = `${score2}%`
  }
})

问题根源 #

用margin控制移动导致联动，核心原因是margin属于文档流布局属性，修改一个元素的margin会影响同一文档流内的其他元素——尤其是块级排列的元素，水平margin的变化会挤压或推动相邻元素位置。

改用fixed定位时，元素脱离了文档流，但它是相对于视口定位的，若未配置top/bottom相关逻辑，自然无法上下移动，而且fixed也不适合需要在游戏容器内移动的场景。

正确实现步骤 #

改用position: absolute定位角色，同时给父容器设置position: relative，让角色相对于父容器独立定位，既解决联动问题，又支持自由上下移动：

1. 给角色的父容器添加CSS：

.game-container {
  position: relative;
  width: 100%;
  height: 600px; /* 根据游戏场景调整高度 */
  overflow: hidden;
}

2. 给两个角色图片添加基础样式：

.img1, .img2 {
  position: absolute;
  top: 50%; /* 初始垂直位置，可按需调整 */
  left: 40%; /* 对应原代码的初始位置百分比 */
  transform: translateY(-50%); /* 可选，实现垂直居中 */
}

3. 修改JS代码，用left和top属性控制移动（替换原有的marginLeft）：

let img1 = document.querySelector(`.img1`)
let img2 = document.querySelector(`.img2`)
// 用位置变量替代原score，更直观
let pos1X = 40
let pos1Y = 50
let pos2X = 40
let pos2Y = 50

// 初始化角色位置
img1.style.left = `${pos1X}%`
img1.style.top = `${pos1Y}%`
img2.style.left = `${pos2X}%`
img2.style.top = `${pos2Y}%`

document.addEventListener(`keydown`, function(e) {
  // 角色1移动控制（方向键）
  if (e.key === 'ArrowRight') {
    pos1X += 0.5
    img1.style.left = `${pos1X}%`
  }
  if (e.key === 'ArrowLeft') {
    pos1X -= 0.5
    img1.style.left = `${pos1X}%`
  }
  if (e.key === 'ArrowUp') {
    pos1Y -= 0.5
    img1.style.top = `${pos1Y}%`
  }
  if (e.key === 'ArrowDown') {
    pos1Y += 0.5
    img1.style.top = `${pos1Y}%`
  }

  // 角色2移动控制（WASD键）
  if (e.key === 'd') {
    pos2X += 0.5
    img2.style.left = `${pos2X}%`
  }
  if (e.key === 'a') {
    pos2X -= 0.5
    img2.style.left = `${pos2X}%`
  }
  if (e.key === 'w') {
    pos2Y -= 0.5
    img2.style.top = `${pos2Y}%`
  }
  if (e.key === 's') {
    pos2Y += 0.5
    img2.style.top = `${pos2Y}%`
  }
})

额外提示 #

• absolute定位的元素完全脱离文档流，修改left/top不会影响其他元素，彻底解决联动问题。
• 父容器设置relative是为了让角色的定位参考游戏容器，而非整个页面。
• 若需要限制角色移出游戏区域，可在修改位置后添加边界判断，比如限制pos1X在0到100之间（根据容器尺寸调整）。

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