碰撞圈 - JavaScript

碰撞圈（Collision Detection）指的是在一个场景中检测两个或更多物体之间是否发生碰撞的技术。在游戏和动画中，碰撞检测是一项重要的技术，常被用来检测玩家是否与敌人或其他物体相撞，或者用于物体的物理模拟等场景。

在 JavaScript 中，我们可以通过多种方式实现碰撞检测，包括：

• 基本形状检测：包括矩形、圆形、三角形、多边形等简单形状的检测方法。
• 像素级检测：通过比较两个物体的像素颜色来判断是否发生碰撞。
• 物理引擎检测：使用开源物理引擎如 Matter.js、Box2d 等来实现物理模拟和碰撞检测。
• 其他检测方法：例如线段检测、射线检测等。

下面我们将以圆形碰撞为例，介绍如何使用 JavaScript 实现碰撞检测。

圆形碰撞检测

圆形碰撞检测是最基本的碰撞检测方法之一，原理是判断两个圆心之间的距离是否小于两个圆的半径之和。如果是，则两个圆发生碰撞。

下面是一个基本实现圆形碰撞检测的 JavaScript 代码片段：

function circleCollision(obj1, obj2) {
  let dx = obj1.x - obj2.x;
  let dy = obj1.y - obj2.y;
  let distance = Math.sqrt(dx * dx + dy * dy);
  if (distance < obj1.radius + obj2.radius) {
    return true;
  } else {
    return false;
  }
}

代码中，obj1 和 obj2 分别表示两个圆形对象，包含圆心坐标和半径属性。我们先计算两个圆心之间的距离，然后比较该距离和两个圆的半径之和，如果小于等于，则返回 true，否则返回 false。

圆形碰撞检测实例

下面是一个基于 Canvas 的例子，演示了如何实现圆形碰撞检测。我们将创建两个圆形对象，分别以不同的速度移动，并检测它们是否发生碰撞。

<canvas id="canvas"></canvas>

<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let circle1 = {
  x: 100,
  y: 100,
  r: 30,
  vx: 5,
  vy: 2
};

let circle2 = {
  x: 200,
  y: 180,
  r: 50,
  vx: -3,
  vy: 4
};

function drawCircle(circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();
}

function updateCircle(circle) {
  circle.x += circle.vx;
  circle.y += circle.vy;
  if (circle.x + circle.r > canvas.width || circle.x - circle.r < 0) {
    circle.vx = -circle.vx;
  }
  if (circle.y + circle.r > canvas.height || circle.y - circle.r < 0) {
    circle.vy = -circle.vy;
  }
}

function detectCollision() {
  if (circleCollision(circle1, circle2)) {
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  } else {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
}

function animate() {
  updateCircle(circle1);
  updateCircle(circle2);
  drawCircle(circle1);
  drawCircle(circle2);
  detectCollision();
  requestAnimationFrame(animate);
}

animate();
</script>

代码中，我们首先定义了两个圆形对象 circle1 和 circle2，包含圆心坐标、半径和速度等属性。然后我们定义了 drawCircle() 函数和 updateCircle() 函数，用于绘制圆形和更新圆形的位置和速度。最后我们定义了 detectCollision() 函数，用于检测两个圆形是否发生碰撞，并在发生碰撞时将画布背景颜色设置为红色。

最后我们在 animate() 函数中使用 requestAnimationFrame() 函数来实现动画效果，并不断更新圆形的位置和绘制。

总结

以上就是基本的 JavaScript 碰撞圈介绍，包含圆形碰撞检测的实现和示例代码。在实际开发中，我们需要根据不同的场景和需求选择合适的碰撞检测方法，并通过优化算法和代码来提高性能。