JS碰撞运动实现方法详解

什么是JS碰撞运动？

JS碰撞运动是指在HTML页面中通过JavaScript代码实现物体自由运动的效果，并且当这些物体相互碰撞时，它们之间会产生一定的相互作用和反应的效果。

JS碰撞运动在游戏开发、动画制作、交互界面设计等方面有着广泛的应用，是Web开发中一个非常重要的技术。

实现方法

JS碰撞运动的实现，可以分为三个步骤：自由运动、监测碰撞、处理碰撞。

步骤一：自由运动

自由运动是指物体在没有受到任何限制的情况下在页面中运动的过程。为了实现自由运动，我们可以使用setInterval或requestAnimationFrame来不断更新物体的位置。

示例代码：

let ball = document.querySelector('#ball');
let vx = 5; // x轴速度
let vy = 5; // y轴速度
let left = 0; // 左边界
let top = 0; // 上边界
let right = window.innerWidth - ball.offsetWidth; // 右边界
let bottom = window.innerHeight - ball.offsetHeight; // 下边界

setInterval(function() {
  // 计算新的位置
  let newLeft = ball.offsetLeft + vx;
  let newTop = ball.offsetTop + vy;
  // 碰到边界时反弹
  if (newLeft < left || newLeft > right) {
    vx = -vx;
  }
  if (newTop < top || newTop > bottom) {
    vy = -vy;
  }
  // 移动物体
  ball.style.left = newLeft + 'px';
  ball.style.top = newTop + 'px';
}, 30);

上述代码中，我们通过计算获取到物体的新位置，并通过判断边界，当物体碰到边界时实现了反弹效果。

步骤二：监测碰撞

监测碰撞是指判断两个物体是否发生了碰撞。在代码中我们可以通过检测两个物体间是否存在重叠来判断是否发生碰撞。这里的重点在于如何获取物体的位置和大小。

示例代码：

// 判断两个元素是否发生了碰撞
function isCollide(elm1, elm2) {
  let rect1 = elm1.getBoundingClientRect();
  let rect2 = elm2.getBoundingClientRect();
  return !(rect1.right < rect2.left || rect1.left > rect2.right || 
           rect1.bottom < rect2.top || rect1.top > rect2.bottom);
}

上述代码中我们使用的是 getBoundingClientRect() 方法获取物体的位置和大小，并通过简单的计算判断它们是否发生了碰撞。

步骤三：处理碰撞

处理碰撞的任务是将两个发生碰撞的物体分别响应不同的事件，比如反弹、消失、合并等等。我们可以通过在自由运动的代码中添加碰撞判断，来在物体碰撞时切换其对应的运动方式以实现处理碰撞的操作。

示例代码：

let ball1 = document.querySelector('#ball1');
let ball2 = document.querySelector('#ball2');
let vx1 = 5;
let vy1 = 5;
let vx2 = -5;
let vy2 = -5;
let left = 0;
let top = 0;
let right = window.innerWidth - ball1.offsetWidth;
let bottom = window.innerHeight - ball1.offsetHeight;

setInterval(function() {
  let newLeft1 = ball1.offsetLeft + vx1;
  let newTop1 = ball1.offsetTop + vy1;
  let newLeft2 = ball2.offsetLeft + vx2;
  let newTop2 = ball2.offsetTop + vy2;
  if (newLeft1 < left || newLeft1 > right) {
    vx1 = -vx1;
  }
  if (newTop1 < top || newTop1 > bottom) {
    vy1 = -vy1;
  }
  if (newLeft2 < left || newLeft2 > right) {
    vx2 = -vx2;
  }
  if (newTop2 < top || newTop2 > bottom) {
    vy2 = -vy2;
  }
  ball1.style.left = newLeft1 + 'px';
  ball1.style.top = newTop1 + 'px';
  ball2.style.left = newLeft2 + 'px';
  ball2.style.top = newTop2 + 'px';
  // 判断是否发生碰撞
  if (isCollide(ball1, ball2)) {
    vx1 = -vx1;
    vy1 = -vy1;
    vx2 = -vx2;
    vy2 = -vy2;
  }
}, 30);

上述代码中我们创建了两个球体，并在其运动的过程中判断是否发生碰撞。当发生碰撞时，我们将两个球体的速度取相反数，以实现碰撞反弹的效果。