js点击按钮两个盒子碰撞运动代码

以下是一个简单的 JavaScript 代码示例，可以实现点击按钮后两个盒子之间的碰撞运动：

HTML 代码：

<button id="btn">点击开始运动</button>
<div id="box1"></div>
<div id="box2"></div>

CSS 代码：

#box1, #box2 {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 50px;
}
#box2 {
  background-color: blue;
  top: 100px;
  left: 100px;
}

JavaScript 代码：

var btn = document.getElementById('btn');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');

btn.onclick = function() {
  var speed1 = 5; // 盒子1的速度
  var speed2 = -3; // 盒子2的速度
  var timer = setInterval(function() {
    var left1 = box1.offsetLeft + speed1;
    var top1 = box1.offsetTop;
    var left2 = box2.offsetLeft + speed2;
    var top2 = box2.offsetTop;
    if (left1 + box1.offsetWidth >= left2 && left1 <= left2 + box2.offsetWidth && top1 + box1.offsetHeight >= top2 && top1 <= top2 + box2.offsetHeight) {
      // 碰撞后反弹
      speed1 = -speed1;
      speed2 = -speed2;
    }
    if (left1 <= 0 || left1 + box1.offsetWidth >= document.documentElement.clientWidth) {
      // 盒子1到达边界后反弹
      speed1 = -speed1;
    }
    if (left2 <= 0 || left2 + box2.offsetWidth >= document.documentElement.clientWidth) {
      // 盒子2到达边界后反弹
      speed2 = -speed2;
    }
    box1.style.left = left1 + 'px';
    box2.style.left = left2 + 'px';
  }, 30);
};

这段代码中，我们首先获取了按钮和两个盒子的 DOM 元素，然后给按钮添加了一个点击事件处理函数。在事件处理函数中，我们定义了两个变量 speed1 和 speed2，分别表示盒子1和盒子2的速度。然后使用 setInterval 函数来不断更新盒子的位置，实现运动效果。在更新位置的过程中，我们判断两个盒子是否发生了碰撞，如果发生了碰撞，则让它们反弹。同时，我们还判断盒子是否到达了边界，如果到达了边界，则让它们反弹。最后，我们将盒子的位置更新到 DOM 中，完成了碰撞运动的效果。