游戏开发中JavaScript圆形碰撞检测算法实现

一、几何原理与基础数学判定条件

在二维笛卡尔坐标系中，任何一个圆形都可以由中心坐标和半径这三个标量唯一确定。设圆 A 的圆心坐标为 (x₁, y₁)，半径为 r₁；圆 B 的圆心坐标为 (x₂, y₂)，半径为 r₂。

根据欧几里得几何定理，平面上两点间的直线距离 d 满足勾股定理：

判断这两个圆形在几何空间上是否存在重叠，只需将两圆心距离 d 与两个圆的半径和 (r₁ + r₂) 进行比较：

• 未碰撞（分离）：当 d > r₁ + r₂ 时，两圆之间存在大于 0 的空间间隔，实体未发生接触。
• 刚好相切（临界）：当 d = r₁ + r₂ 时，两圆在连心线上仅接触于单一临界点。
• 发生碰撞（重叠）：当 d < r₁ + r₂ 时，两圆出现重叠区域，实体判定为碰撞。

二、算法推导与性能优化：避免 Math.sqrt 运算

直接使用公式 Math.sqrt((x2 - x1)**2 + (y2 - y1)**2) <= r1 + r2 可以在逻辑上得出正确结果，但在实时游戏物理循环中，这并不是最优的工程实现。

在 CPU 指令级别，浮点数加法与乘法通常仅需要 1 到 3 个时钟周期，而开平方指令（如 x86 架构下的 FSQRT 或 SSE SQRTSD）需要 15 到 30 个时钟周期。当游戏同屏存在数十甚至数百个动态物体时，每帧的两两比对复杂度为 O(N²)，频繁调用 Math.sqrt() 会造成显著的 CPU 算力开销。

因此，我们只需比较两圆心距离的平方（distanceSquared）与半径和的平方（radiusSumSquared）。这样整个判断过程仅需两次减法、三次乘法和两次加法，彻底消除开方操作。

三、JavaScript 代码实现与模块封装

在实际游戏代码中，圆形对象通常以结构体或类的形式存在，包含 x、y 和 radius 属性。以下为高性能布尔碰撞检测函数的标准实现：

/**
 * 判定两个圆形对象是否发生碰撞
 * @param {{x: number, y: number, radius: number}} c1 第一个圆形
 * @param {{x: number, y: number, radius: number}} c2 第二个圆形
 * @returns {boolean} 是否发生碰撞
 */
function isCircleColliding(c1, c2) {
  // 1. 计算两圆心在各轴向上的投影差值
  const dx = c2.x - c1.x;
  const dy = c2.y - c1.y;

  // 2. 计算圆心直线距离的平方 (dx² + dy²)
  const distSq = dx * dx + dy * dy;

  // 3. 计算半径和的平方 (r₁ + r₂)²
  const radiusSum = c1.radius + c2.radius;
  const radiusSumSq = radiusSum * radiusSum;

  // 4. 纯标量比对，返回判定结果
  return distSq <= radiusSumSq;
}

该函数在 Chrome V8 等现代 JavaScript 引擎中具备极佳的内联优化（JIT Inline）潜力，执行时不会产生多余的临时堆内存对象分配，能有效避免垃圾回收（GC）引起的掉帧。

四、碰撞响应与穿透分离计算

只获取布尔值 true 或 false 仅能完成“触发事件”（如子弹击中怪物后销毁）。但在物理模拟或角色移动中，两个实体碰撞后不能相互穿透重叠，必须通过物理响应（Collision Resolution）将穿透的物体推开。

解决穿透的核心步骤如下：

1. 计算真实距离与重叠深度（Overlap / Penetration Depth）： 此时必须使用 Math.sqrt(distSq) 求解真实距离 d（仅在已发生碰撞时才执行一次开方，对整体帧率影响极低）。穿透深度为 overlap = (r₁ + r₂) - d。
2. 求解碰撞单位法线（Collision Normal）： 两圆心连线方向即为法线方向，单位向量为 nx = dx / d，ny = dy / d。
3. 位置修正（Position Correction）： 将两个圆分别沿法线方向反向平移 overlap / 2；若其中一个圆为不可移动的静态障碍物（如墙体），则将移动物体单向推开完整的 overlap 距离。

/**
 * 求解两圆穿透并执行位置修正分离
 * @param {{x: number, y: number, radius: number}} c1 可移动圆形 A
 * @param {{x: number, y: number, radius: number}} c2 可移动圆形 B
 */
function resolveCircleOverlap(c1, c2) {
  const dx = c2.x - c1.x;
  const dy = c2.y - c1.y;
  const distSq = dx * dx + dy * dy;
  const radiusSum = c1.radius + c2.radius;

  // 若未发生碰撞，直接返回
  if (distSq > radiusSum * radiusSum) return false;

  // 处理圆心完全重合的奇点边界
  const d = Math.sqrt(distSq) || 0.0001;
  const overlap = radiusSum - d;

  // 计算单位碰撞法线
  const nx = dx / d;
  const ny = dy / d;

  // 双方各承担一半的穿透位移修正
  const halfOverlap = overlap * 0.5;
  c1.x -= nx * halfOverlap;
  c1.y -= ny * halfOverlap;
  c2.x += nx * halfOverlap;
  c2.y += ny * halfOverlap;

  return true;
}

五、HTML5 Canvas 游戏循环实战示例

下面是一个将圆形碰撞检测与响应算法整合进 requestAnimationFrame 游戏主循环的完整可执行代码片段。读者可直接将其置于包含 <canvas id="gameCanvas"></canvas> 的页面中验证效果。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 定义两个测试球体实体
const ballA = { x: 150, y: 200, radius: 45, vx: 3.2, vy: 2.1, color: '#477DAD' };
const ballB = { x: 450, y: 200, radius: 35, vx: -2.5, vy: -1.8, color: '#4F6272' };

function updateEntity(b) {
  b.x += b.vx;
  b.y += b.vy;

  // 画布边缘弹性碰撞
  if (b.x - b.radius < 0) { b.x = b.radius; b.vx *= -1; }
  if (b.x + b.radius > canvas.width) { b.x = canvas.width - b.radius; b.vx *= -1; }
  if (b.y - b.radius < 0) { b.y = b.radius; b.vy *= -1; }
  if (b.y + b.radius > canvas.height) { b.y = canvas.height - b.radius; b.vy *= -1; }
}

function handleBallCollision(b1, b2) {
  const dx = b2.x - b1.x;
  const dy = b2.y - b1.y;
  const distSq = dx * dx + dy * dy;
  const radiusSum = b1.radius + b2.radius;

  if (distSq <= radiusSum * radiusSum) {
    const dist = Math.sqrt(distSq) || 0.001;
    const overlap = radiusSum - dist;
    const nx = dx / dist;
    const ny = dy / dist;

    // 1. 位置分离：消除穿透
    b1.x -= nx * (overlap * 0.5);
    b1.y -= ny * (overlap * 0.5);
    b2.x += nx * (overlap * 0.5);
    b2.y += ny * (overlap * 0.5);

    // 2. 动量交换：沿法线方向反转相对速度
    const kx = b1.vx - b2.vx;
    const ky = b1.vy - b2.vy;
    const p = 2 * (nx * kx + ny * ky) / 2; // 简化为对等质量完全弹性碰撞
    b1.vx -= p * nx;
    b1.vy -= p * ny;
    b2.vx += p * nx;
    b2.vy += p * ny;
  }
}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  updateEntity(ballA);
  updateEntity(ballB);
  handleBallCollision(ballA, ballB);

  // 渲染两个圆形
  [ballA, ballB].forEach(b => {
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
    ctx.fillStyle = b.color;
    ctx.fill();
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineWidth = 2;
    ctx.stroke();
  });

  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

六、工程实践注意事项与常见陷阱

在商业游戏或较复杂的互动项目中应用圆形碰撞检测时，需要特别关注以下几个容易引发隐蔽 Bug 的技术细节：

1. 坐标锚点统一（Center vs Top-Left）

HTML5 Canvas 的 ctx.drawImage() 默认以图像的左上角作为定位锚点，而几何圆形碰撞检测严格要求以圆心位置作为 (x, y)。如果在渲染或逻辑更新中混淆了锚点，碰撞判定范围将产生等于半径长度的系统偏移。因此，在绘制切片精灵时务必将绘制原点校准为 (x - radius, y - radius)。

2. 高速物体的穿隧效应（Tunneling / 穿墙）

如果物体运动速度极快（单帧位移 |v| · dt > 2r），物体可能会在前一帧位于障碍物左侧，后一帧直接跳跃到障碍物右侧，导致两帧检测均判定为未重叠。

3. 广相粗筛（Broad-Phase）与空间分割

单纯两两循环检测的时间复杂度为 O(N²)。当场景中有 200 个实体时，每帧需要进行近 20,000 次比对。工程中应当引入网格空间哈希（Spatial Hashing）或四叉树（Quadtree），先将距离较远的实体排除，仅将处于同一空间单元格内的候选物体送入圆形碰撞细筛中。