Canvas小游戏离不开的几种碰撞检测

在Canvas小游戏开发中，碰撞检测是构建物理交互的核心环节。从简单的矩形碰撞到复杂的像素级检测，不同场景需要选择适配的算法以平衡性能与精度。本文将系统梳理五种关键碰撞检测技术，结合代码示例与优化策略，为开发者提供实用指南。

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

矩形碰撞检测是游戏开发中最基础的检测方式，适用于角色、障碍物等规则形状的交互判断。其核心原理是通过比较两个矩形的边界坐标确定是否重叠。

1.1 算法实现

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

该算法通过判断矩形A的右边界是否大于矩形B的左边界、左边界是否小于矩形B的右边界，以及垂直方向的类似判断，确定两矩形是否相交。

1.2 优化策略

• 空间分区：对游戏场景进行网格划分，仅检测同一区域内的对象。
• 动态检测：根据对象运动速度动态调整检测频率，高速移动对象需更频繁检测。
• 提前终止：在检测过程中若发现不满足任一条件，立即终止后续判断。

二、圆形碰撞检测：适合旋转对象的解决方案

当游戏对象存在旋转或需要更平滑的碰撞边界时，圆形检测成为优选方案。其核心是通过计算两圆心距离与半径之和的比较实现。

2.1 算法实现

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

该算法利用欧几里得距离公式计算两圆心距离，与半径之和对比判断碰撞。

2.2 性能优化

• 距离平方比较：避免开方运算，直接比较距离平方与半径和平方。
• 空间哈希：将圆形对象映射到哈希表，快速筛选可能碰撞的对象。

三、像素级碰撞检测：高精度需求的终极方案

对于不规则形状或需要精确到像素级的交互（如射击游戏子弹命中判定），像素级检测是必要选择。Canvas提供了getImageData方法实现此功能。

3.1 实现步骤

1. 创建离屏Canvas：绘制两个待检测对象到离屏Canvas。
2. 获取像素数据：通过getImageData获取重叠区域的像素数据。
3. 遍历像素：检查重叠区域内是否存在非透明像素。

function isPixelCollision(ctx1, rect1, ctx2, rect2) {
  const overlapX = Math.max(rect1.x, rect2.x);
  const overlapY = Math.max(rect1.y, rect2.y);
  const overlapWidth = Math.min(rect1.x + rect1.width, rect2.x + rect2.width) - overlapX;
  const overlapHeight = Math.min(rect1.y + rect1.height, rect2.y + rect2.height) - overlapY;
  if (overlapWidth <= 0 || overlapHeight <= 0) return false;
  const imageData1 = ctx1.getImageData(overlapX, overlapY, overlapWidth, overlapHeight);
  const imageData2 = ctx2.getImageData(overlapX, overlapY, overlapWidth, overlapHeight);
  const data1 = imageData1.data;
  const data2 = imageData2.data;
  for (let i = 3; i < data1.length; i += 4) {
    if (data1[i] > 0 && data2[i] > 0) return true;
  }
  return false;
}

3.2 性能瓶颈与解决方案

• 计算密集：像素遍历消耗大量CPU资源。
  • 优化方案：限制检测区域大小，或采用分层检测（先矩形检测，再像素检测）。
• 内存占用：频繁创建离屏Canvas可能导致内存问题。
  • 优化方案：复用离屏Canvas，或降低检测频率。

四、分离轴定理（SAT）：多边形碰撞的通用解法

对于任意凸多边形，分离轴定理提供了一种高效的碰撞检测方法。其核心思想是：若两个凸多边形在任意轴上的投影不重叠，则它们不相交。

4.1 算法实现

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 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 min1 = Infinity, max1 = -Infinity;
      const min2 = Infinity, max2 = -Infinity;
      // 投影多边形1到法线轴
      for (const vertex of polygon1.vertices) {
        const projection = vertex.x * normal.x + vertex.y * normal.y;
        min1 = Math.min(min1, projection);
        max1 = Math.max(max1, projection);
      }
      // 投影多边形2到法线轴
      for (const vertex of polygon2.vertices) {
        const projection = vertex.x * normal.x + vertex.y * normal.y;
        min2 = Math.min(min2, projection);
        max2 = Math.max(max2, projection);
      }
      if (max1 < min2 || max2 < min1) return false;
    }
  }
  return true;
}

4.2 适用场景与限制

• 凸多边形：仅适用于凸多边形，凹多边形需先分解为凸多边形。
• 性能：顶点数量增加会显著影响性能，建议顶点数控制在20以内。

五、碰撞响应：从检测到交互的完整闭环

单纯的碰撞检测不足以构建真实的物理交互，需结合碰撞响应算法实现反弹、滑动等效果。

5.1 反弹响应实现

function resolveCollision(obj1, obj2, normal) {
  const velocity1 = { x: obj1.vx, y: obj1.vy };
  const velocity2 = { x: obj2.vx, y: obj2.vy };
  // 计算相对速度
  const relativeVelocity = {
    x: velocity1.x - velocity2.x,
    y: velocity1.y - velocity2.y
  };
  // 计算速度在法线方向的分量
  const velocityAlongNormal = relativeVelocity.x * normal.x + relativeVelocity.y * normal.y;
  // 若分离则不处理
  if (velocityAlongNormal > 0) return;
  // 计算弹性系数（0为完全非弹性，1为完全弹性）
  const restitution = 0.8;
  // 计算冲量
  const impulseMagnitude = -(1 + restitution) * velocityAlongNormal;
  const impulse = {
    x: impulseMagnitude * normal.x,
    y: impulseMagnitude * normal.y
  };
  // 应用冲量（假设质量为1）
  obj1.vx -= impulse.x * 0.5;
  obj1.vy -= impulse.y * 0.5;
  obj2.vx += impulse.x * 0.5;
  obj2.vy += impulse.y * 0.5;
}

5.2 滑动摩擦处理

function applyFriction(obj, normal, frictionCoefficient = 0.3) {
  // 计算法线方向的单位向量
  const normalLength = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
  const unitNormal = { x: normal.x / normalLength, y: normal.y / normalLength };
  // 计算切线方向（垂直于法线）
  const tangent = { x: -unitNormal.y, y: unitNormal.x };
  // 计算速度在切线方向的分量
  const velocity = { x: obj.vx, y: obj.vy };
  const velocityAlongTangent = velocity.x * tangent.x + velocity.y * tangent.y;
  // 应用摩擦力
  const frictionForce = {
    x: -tangent.x * velocityAlongTangent * frictionCoefficient,
    y: -tangent.y * velocityAlongTangent * frictionCoefficient
  };
  obj.vx += frictionForce.x;
  obj.vy += frictionForce.y;
}

六、性能优化：平衡精度与效率

在Canvas游戏中，碰撞检测可能成为性能瓶颈。以下策略可显著提升检测效率：

1. 空间分区技术：

   • 四叉树：将场景递归划分为四个象限，仅检测同一象限内的对象。
   • 网格分区：将场景划分为固定大小的网格，对象仅与所在网格及相邻网格内的对象检测。

2. 粗检测-细检测分层：

   • 第一阶段：使用矩形或圆形检测快速排除不可能碰撞的对象。
   • 第二阶段：对可能碰撞的对象进行高精度检测（如像素级或SAT）。

3. 对象池与复用：

   • 复用检测对象，避免频繁创建销毁带来的内存分配开销。

4. Web Workers：

   • 将碰撞检测计算移至Web Worker，避免阻塞主线程渲染。

七、实际应用案例：平台游戏中的碰撞系统

以经典平台游戏为例，整合多种检测技术实现完整物理系统：

1. 角色与地面检测：

   • 使用矩形检测判断角色是否站在地面上。
   • 通过分离轴定理处理斜坡碰撞。

2. 敌人与障碍物检测：

   • 圆形检测实现敌人与简单障碍物的碰撞。
   • 像素级检测实现精确的子弹命中判定。

3. 性能优化：

   • 静态障碍物（如地面）使用空间分区管理。
   • 动态对象（如敌人）使用网格分区+粗检测。

八、总结与建议

Canvas小游戏中的碰撞检测需根据具体场景选择合适的技术组合：

• 简单游戏：矩形+圆形检测即可满足需求。
• 高精度需求：采用分层检测（矩形→像素级）。
• 复杂多边形：使用分离轴定理。

开发建议：

1. 始终先实现基础检测，再逐步增加精度。
2. 使用Chrome DevTools的Performance面板分析检测性能。
3. 参考开源物理引擎（如Matter.js）的实现思路。

通过合理选择和优化碰撞检测技术，开发者能够在Canvas中构建出流畅、真实的物理交互体验，为玩家带来更具沉浸感的游戏世界。