多div方块弹跳异常：为何仅一个div可正常移动？

核心问题 #

1. 重复赋值window.onload：后面的window.onload会完全覆盖前面的定义，导致第一个加载逻辑被直接忽略。
2. innerHTML +=破坏已有DOM元素属性：每次调用createBlock时，用innerHTML +=拼接新元素会重新渲染容器内所有已有元素，导致之前创建的方块（比如player）的自定义属性xSpd、ySpd丢失，最终无法移动。
3. HTML中ID使用中文引号：<div id=“bigRectangle>里的引号是中文全角格式，会导致无法通过getElementById正确获取容器。

修复后的完整代码 #

HTML部分

<body>
  <div id="bigRectangle"></div>
</body>

CSS部分（补充定位样式，否则方块无法正常移动）

#bigRectangle {
  width: 700px;
  height: 600px;
  border: 2px solid black;
  position: relative;
  overflow: hidden;
}

.smallRectangle {
  position: absolute;
}

JavaScript部分

var player;
var obstacle;
var box;

function createBlock(startXSpd, startYSpd, color, id, target) {
  // 用createElement创建元素，避免破坏已有DOM结构和属性
  var elem = document.createElement('div');
  elem.className = 'smallRectangle';
  elem.id = id;
  elem.style.top = Math.random() * 600 + "px";
  elem.style.left = Math.random() * 700 + "px";
  elem.style.height = "25px";
  elem.style.width = "25px";
  elem.style.backgroundColor = color;
  elem.xSpd = startXSpd;
  elem.ySpd = startYSpd;
  
  // 将新元素添加到容器中
  document.getElementById(target).appendChild(elem);
  return elem;
}

// 实现边界碰撞反弹逻辑
function bounce(block) {
  var container = document.getElementById('bigRectangle');
  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;
  
  // 水平方向碰撞反弹
  if (parseInt(block.style.left) <= 0 || parseInt(block.style.left) + block.offsetWidth >= containerWidth) {
    block.xSpd *= -1;
  }
  // 垂直方向碰撞反弹
  if (parseInt(block.style.top) <= 0 || parseInt(block.style.top) + block.offsetHeight >= containerHeight) {
    block.ySpd *= -1;
  }
}

// 实现方块位置更新逻辑
function moveBlock(block) {
  block.style.left = parseInt(block.style.left) + block.xSpd + "px";
  block.style.top = parseInt(block.style.top) + block.ySpd + "px";
}

window.onload = function() {
  player = createBlock(2, 2, "green", "player", "bigRectangle");
  obstacle = createBlock(2, 2, "red", "obstacle", "bigRectangle");
  box = createBlock(2, 2, "blue", "box", "bigRectangle");

  setInterval(function() {
    bounce(obstacle);
    moveBlock(obstacle);
    bounce(player);
    moveBlock(player);
    bounce(box);
    moveBlock(box);
  }, 10);
}

关键修复点说明 #

• 替换innerHTML +=为createElement+appendChild：这种方式不会重新渲染已有元素，能完整保留方块的自定义速度属性，避免属性丢失。
• 合并重复的window.onload：确保所有初始化逻辑都能正常执行。
• 修正HTML的中文引号：保证容器元素能被正确获取。
• 补全bounce和moveBlock函数：这两个是实现弹跳效果的核心逻辑，原代码缺失会导致方块无法移动。

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