引言

在Canvas小游戏开发中，碰撞检测是构建游戏逻辑的核心环节。无论是角色移动限制、子弹命中判定还是物体交互反馈，精准的碰撞检测直接决定了游戏体验的流畅度与真实性。本文将系统梳理四种主流碰撞检测技术，结合代码示例与性能优化策略，帮助开发者构建高效可靠的碰撞系统。

一、基础矩形碰撞检测

1.1 原理与适用场景

矩形碰撞检测通过比较两个矩形的边界坐标实现，适用于规则形状物体（如平台游戏中的砖块、角色碰撞框）。其核心优势在于计算量小、实现简单，是大多数2D游戏的入门选择。

1.2 代码实现

function checkRectCollision(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y
  );
}
// 使用示例
const player = { x: 100, y: 100, width: 50, height: 80 };
const obstacle = { x: 120, y: 150, width: 60, height: 40 };
if (checkRectCollision(player, obstacle)) {
  console.log("碰撞发生！");
}

1.3 优化建议

• 提前终止：在检测不满足条件时立即返回，减少无效计算
• 空间分区：对静态物体使用网格分区，仅检测相邻区域物体
• 动态物体管理：对高速移动物体采用扫描线算法预防隧道效应

二、圆形碰撞检测

2.1 数学原理

基于欧几里得距离的圆形检测，适用于球体、子弹等旋转对称物体。计算公式为：

distance = √((x2-x1)² + (y2-y1)²)
碰撞条件：distance < r1 + r2

2.2 性能优化实现

function checkCircleCollision(circle1, circle2) {
  const dx = circle1.x - circle2.x;
  const dy = circle1.y - circle2.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return distance < circle1.radius + circle2.radius;
}
// 优化版（避免开方运算）
function optimizedCircleCheck(c1, c2) {
  const dx = c1.x - c2.x;
  const dy = c1.y - c2.y;
  const distanceSq = dx * dx + dy * dy;
  const radiusSum = c1.radius + c2.radius;
  return distanceSq < radiusSum * radiusSum;
}

2.3 应用场景

• 弹幕游戏子弹判定
• 粒子系统交互
• 物理引擎中的基础碰撞

三、像素级精确检测

3.1 实现原理

通过Canvas的getImageData方法获取像素数据，比较重叠区域的非透明像素。适用于不规则形状（如复杂角色、地图遮罩）。

3.2 完整实现方案

function isPixelCollision(ctx1, rect1, ctx2, rect2) {
  // 创建离屏Canvas进行裁剪检测
  const buffer = document.createElement('canvas');
  buffer.width = Math.max(rect1.width, rect2.width);
  buffer.height = Math.max(rect1.height, rect2.height);
  const bufferCtx = buffer.getContext('2d');
  // 绘制第一个对象（考虑相对位置）
  bufferCtx.save();
  bufferCtx.translate(-rect1.x, -rect1.y);
  ctx1.drawImage(buffer, 0, 0); // 实际应使用原Canvas的对应区域
  bufferCtx.restore();
  // 绘制第二个对象
  bufferCtx.save();
  bufferCtx.translate(-rect2.x, -rect2.y);
  ctx2.drawImage(buffer, 0, 0);
  bufferCtx.restore();
  // 获取重叠区域数据
  const overlapX = Math.max(rect1.x, rect2.x);
  const overlapY = Math.max(rect1.y, rect2.y);
  const width = Math.min(rect1.x + rect1.width, rect2.x + rect2.width) - overlapX;
  const height = Math.min(rect1.y + rect1.height, rect2.y + rect2.height) - overlapY;
  if (width <= 0 || height <= 0) return false;
  const data = bufferCtx.getImageData(overlapX, overlapY, width, height).data;
  for (let i = 3; i < data.length; i += 4) {
    if (data[i] > 0) return true; // 发现非透明像素
  }
  return false;
}

3.3 性能优化策略

• 脏矩形技术：仅检测发生变化的区域
• 分辨率降级：在移动端使用低分辨率检测
• 缓存机制：对静态物体预计算碰撞掩模

四、分离轴定理（SAT）多边形检测

4.1 核心算法

1. 对每个多边形的边创建法线轴
2. 将所有顶点投影到每个轴上
3. 检查投影是否重叠，所有轴都重叠才发生碰撞

4.2 实现代码

function checkPolygonCollision(polygon1, polygon2) {
  const polygons = [polygon1, polygon2];
  for (let i = 0; i < polygons.length; i++) {
    const polygon = polygons[i];
    for (let j = 0; j < polygon.vertices.length; j++) {
      const nextIndex = (j + 1) % polygon.vertices.length;
      const edge = {
        x: polygon.vertices[nextIndex].x - polygon.vertices[j].x,
        y: polygon.vertices[nextIndex].y - polygon.vertices[j].y
      };
      // 计算法线轴
      const normal = { x: -edge.y, y: edge.x };
      const minMax1 = projectPolygon(polygon1, normal);
      const minMax2 = projectPolygon(polygon2, normal);
      if (minMax1.max < minMax2.min || minMax2.max < minMax1.min) {
        return false; // 分离轴存在，无碰撞
      }
    }
  }
  return true;
}
function projectPolygon(polygon, axis) {
  let min = Infinity;
  let max = -Infinity;
  for (const vertex of polygon.vertices) {
    const projection = vertex.x * axis.x + vertex.y * axis.y;
    min = Math.min(min, projection);
    max = Math.max(max, projection);
  }
  return { min, max };
}

4.3 应用场景

• 复杂几何体碰撞
• 物理引擎中的刚体模拟
• 斜坡、三角形平台等非矩形地形

五、高级优化策略

5.1 空间分区技术

• 四叉树：适用于动态物体分布不均的场景
• 网格分区：简单高效，适合静态背景
• BVH（层次包围盒）：复杂场景下的高效查询

5.2 粗细检测结合

function hybridCollisionCheck(obj1, obj2) {
  // 粗检测阶段
  if (!broadPhaseCheck(obj1, obj2)) return false;
  // 细检测阶段
  switch(obj1.type) {
    case 'rect':
      return detailedRectCheck(obj1, obj2);
    case 'circle':
      return detailedCircleCheck(obj1, obj2);
    case 'polygon':
      return detailedPolygonCheck(obj1, obj2);
    default:
      return false;
  }
}

5.3 Web Workers多线程处理

将碰撞计算分配到Web Worker，避免阻塞主线程渲染：

// 主线程
const worker = new Worker('collision-worker.js');
worker.postMessage({ 
  type: 'check', 
  objects: [player, obstacles] 
});
worker.onmessage = (e) => {
  if (e.data.collision) handleCollision();
};
// worker.js
self.onmessage = (e) => {
  const result = performCollisionCheck(e.data.objects);
  self.postMessage(result);
};

六、实践建议

1. 分层检测：按物体类型分组检测（如玩家vs敌人、子弹vs目标）
2. 动态调整精度：根据物体速度决定检测精度（高速物体需要更精确的检测）
3. 调试可视化：开发阶段绘制碰撞框辅助调试
4. 性能监控：使用performance.now()测量检测耗时

结语

选择合适的碰撞检测方案需要综合考虑游戏类型、物体复杂度、性能要求等因素。建议开发者从矩形检测入手，逐步引入圆形和SAT检测，最终根据项目需求决定是否采用像素级精确检测。通过合理运用空间分区和粗细检测结合策略，即使在中低端设备上也能实现流畅的碰撞体验。