掌握碰撞检测精髓：Canvas小游戏开发必备指南

在Canvas小游戏开发领域，碰撞检测是构建沉浸式交互体验的核心技术之一。无论是经典打砖块游戏的砖块击打反馈，还是横版过关游戏中的角色障碍互动，精准的碰撞判断直接影响游戏逻辑的严谨性与玩家体验的流畅性。本文将系统梳理Canvas开发中常用的四种碰撞检测方案，结合数学原理与代码实现，为开发者提供可落地的技术指南。

一、矩形碰撞检测：基础中的基础

作为最基础的碰撞检测方法，矩形碰撞检测通过比较两个矩形的位置关系实现快速判断。其核心原理基于轴对齐包围盒（AABB）算法，适用于规则形状的碰撞检测。

实现原理

1. 坐标获取：通过getBoundingClientRect()或手动维护的坐标系统获取两个矩形的位置信息
2. 边界判断：比较矩形A的右边界是否大于矩形B的左边界，且矩形A的左边界是否小于矩形B的右边界
3. 垂直验证：同步验证上下边界的重叠关系

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
  );
}

优化策略

• 空间分区：对游戏场景进行网格划分，仅检测相邻区域的碰撞
• 动态排序：根据对象运动方向进行预测性检测，减少无效计算
• 宽相位检测：先进行粗略检测（如圆形包围盒），再进行精确矩形检测

二、圆形碰撞检测：适合旋转物体的方案

当游戏对象需要旋转或呈现圆形特征时，圆形碰撞检测提供了更精确的解决方案。其核心基于两点间距离与半径之和的比较。

数学基础

1. 距离计算：使用勾股定理计算两圆心距离

   $distance = \sqrt{(x2-x1)^2 + (y2-y1)^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;
}

性能优化

• 平方距离比较：避免开方运算，直接比较距离平方与半径平方和
• 空间哈希：将圆形映射到网格单元，减少检测范围
• 四叉树分割：对动态对象进行空间分层管理

三、像素级碰撞检测：极致精确的代价

对于需要精确到像素级别的碰撞（如不规则形状的角色互动），像素级检测提供了终极解决方案。其原理是通过Canvas的getImageData()方法获取像素数据，进行颜色值比较。

实现步骤

1. 创建离屏Canvas：绘制需要检测的两个对象
2. 获取像素数据：使用getImageData()提取RGBA值
3. 遍历比较：检测重叠区域是否存在非透明像素

function isPixelCollision(ctx1, ctx2, rect1, rect2) {
  // 创建离屏Canvas并绘制对象
  const tempCtx = document.createElement('canvas').getContext('2d');
  tempCtx.canvas.width = Math.max(rect1.width, rect2.width);
  tempCtx.canvas.height = Math.max(rect1.height, rect2.height);
  // 绘制逻辑...
  // 获取像素数据
  const data1 = ctx1.getImageData(rect1.x, rect1.y, rect1.width, rect1.height).data;
  const data2 = ctx2.getImageData(rect2.x, rect2.y, rect2.width, rect2.height).data;
  // 像素比较逻辑...
}

性能考量

• 采样优化：采用间隔采样而非全像素遍历
• 缓存机制：对静态对象预计算碰撞掩模
• 分层检测：先进行粗略检测，再对可能碰撞区域进行像素检测

四、分离轴定理（SAT）：多边形碰撞的终极方案

对于复杂多边形或需要精确物理模拟的游戏，分离轴定理提供了数学上严谨的解决方案。其核心思想是：如果两个凸多边形在任意一条轴上的投影不重叠，则它们不相交。

算法步骤

1. 获取边法向量：计算多边形每条边的法向量作为检测轴
2. 投影计算：将两个多边形的顶点投影到各轴上
3. 重叠验证：检查所有轴上的投影是否重叠
4. 提前终止：发现不重叠轴立即终止检测

function checkSATCollision(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 edge = {
        x: polygon.vertices[(j + 1) % polygon.vertices.length].x - polygon.vertices[j].x,
        y: polygon.vertices[(j + 1) % polygon.vertices.length].y - polygon.vertices[j].y
      };
      const normal = { x: -edge.y, y: edge.x }; // 法向量
      // 投影计算...
      // 重叠验证...
    }
  }
  return true; // 所有轴都重叠则碰撞
}

优化技巧

• 凸包简化：将复杂形状转换为凸多边形
• 空间分区：使用BSP树或四叉树减少检测对数
• 惰性计算：对静止对象缓存投影数据

五、碰撞响应：从检测到反馈

完整的碰撞系统需要包含检测后的响应逻辑，常见的处理方式包括：

1. 位置修正：将对象移回碰撞前的位置
2. 物理反弹：根据碰撞法线计算速度变化
3. 状态触发：播放音效、触发动画或改变游戏状态

function resolveCollision(obj1, obj2, normal) {
  const relativeVelocity = {
    x: obj1.velocity.x - obj2.velocity.x,
    y: obj1.velocity.y - obj2.velocity.y
  };
  const velocityAlongNormal = relativeVelocity.x * normal.x + relativeVelocity.y * normal.y;
  if (velocityAlongNormal > 0) return; // 同向运动不处理
  const e = 0.9; // 弹性系数
  const impulse = -(1 + e) * velocityAlongNormal;
  impulse /= 1 / obj1.mass + 1 / obj2.mass;
  obj1.velocity.x -= (impulse * normal.x) / obj1.mass;
  obj1.velocity.y -= (impulse * normal.y) / obj1.mass;
  obj2.velocity.x += (impulse * normal.x) / obj2.mass;
  obj2.velocity.y += (impulse * normal.y) / obj2.mass;
}

六、性能优化实战建议

1. 检测频率控制：对快速移动对象采用连续碰撞检测（CCD）
2. 对象池管理：复用碰撞检测对象减少内存分配
3. Web Workers：将复杂计算卸载到后台线程
4. GPU加速：利用WebGL进行并行碰撞计算（高级方案）

结语

从简单的矩形检测到复杂的SAT算法，Canvas小游戏开发中的碰撞检测技术呈现明显的层次性。开发者应根据游戏类型、性能需求和开发周期综合选择：

• 2D平台游戏：矩形+圆形检测组合
• 物理模拟游戏：SAT算法+碰撞响应
• 高精度需求：像素检测+空间分区优化

掌握这些核心技术后，开发者可以更自信地构建出具有专业级碰撞交互的Canvas小游戏，在H5游戏市场中占据竞争优势。建议通过实际项目不断实践，逐步构建适合自身游戏类型的碰撞检测框架。