引言

在Canvas小游戏开发中，碰撞检测是实现游戏物理交互的核心环节。无论是角色移动、子弹射击还是道具拾取，精准的碰撞判断直接影响游戏体验。本文将系统梳理Canvas中常用的碰撞检测方法，从基础几何检测到高级像素级检测，结合代码示例与性能优化技巧，为开发者提供全流程解决方案。

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

矩形检测是游戏开发中最简单高效的碰撞判断方式，适用于大多数规则形状的物体。其核心原理是通过比较两个矩形的坐标范围是否重叠实现。

1.1 基础实现原理

假设物体A的坐标为(x1, y1)，宽高为(w1, h1)；物体B的坐标为(x2, y2)，宽高为(w2, h2)。矩形碰撞的判断条件为：

function checkRectCollision(a, b) {
    return (
        a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y
    );
}

该条件通过比较四个边界值（左、右、上、下）是否交叉，实现快速碰撞检测。

1.2 性能优化技巧

空间分区：将游戏场景划分为网格，仅检测相邻网格内的物体。
提前终止：在检测循环中，一旦发现不碰撞立即终止后续判断。
轴对齐边界框（AABB）：确保所有矩形与坐标轴平行，简化计算。

1.3 适用场景分析

矩形检测最适合以下场景：

规则形状物体（如砖块、平台）
性能敏感型游戏（如超休闲游戏）
早期原型开发阶段

二、圆形碰撞检测：平滑的交互体验

圆形检测通过比较两个圆形的半径和圆心距离实现，适用于需要平滑碰撞反馈的场景。

2.1 数学原理与实现

设圆A的圆心为(x1, y1)，半径为r1；圆B的圆心为(x2, y2)，半径为r2。碰撞条件为：

function checkCircleCollision(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance < a.radius + b.radius;
}

2.2 性能优化方案

距离平方比较：避免开方运算，直接比较距离平方与半径和平方。
空间哈希：将圆形映射到哈希表，减少无效检测。
四叉树分割：对动态物体使用四叉树进行空间管理。

2.3 典型应用案例

弹球游戏中的球体碰撞
角色技能范围判定
粒子系统中的相互作用

三、像素级碰撞检测：极致精准的解决方案

当游戏需要精确到像素级的碰撞判断时（如不规则形状物体），像素检测成为唯一选择。

3.1 实现原理详解

离屏渲染：将物体绘制到离屏Canvas
像素数据提取：使用getImageData获取像素数组
碰撞点检测：比较两个物体在重叠区域的像素透明度

3.2 代码实现示例

function checkPixelCollision(ctx, obj1, obj2) {
    // 创建离屏Canvas
    const buffer = document.createElement('canvas');
    const bufferCtx = buffer.getContext('2d');
    // 绘制物体1（使用纯色填充）
    bufferCtx.save();
    bufferCtx.translate(obj1.x, obj1.y);
    // 绘制逻辑...
    bufferCtx.restore();
    // 获取像素数据
    const data1 = bufferCtx.getImageData(0, 0, buffer.width, buffer.height).data;
    // 类似处理物体2
    // ...
    // 比较重叠区域像素
    // 实现细节省略...
}

3.3 性能优化策略

缓存检测结果：对静态物体缓存碰撞掩码
降采样处理：降低检测分辨率提高性能
分层检测：先进行粗略检测，再对可能碰撞区域进行像素检测

四、高级检测技术：分离轴定理（SAT）

对于凸多边形碰撞检测，分离轴定理提供了数学上严谨的解决方案。

4.1 算法核心思想

SAT基于以下原理：如果两个凸多边形在任意一个轴上的投影不重叠，则它们不相交。

4.2 实现步骤解析

获取两个多边形的所有边
计算每条边的法线作为投影轴
将两个多边形投影到每个轴上
检查投影区间是否重叠

4.3 代码实现要点

function checkSATCollision(poly1, poly2) {
    const polygons = [poly1, poly2];
    for (let i = 0; i < polygons.length; i++) {
        const poly = polygons[i];
        for (let j = 0; j < poly.vertices.length; j++) {
            const edge = getEdge(poly, j);
            const normal = getNormal(edge);
            const min1 = projectPolygon(poly1, normal);
            const min2 = projectPolygon(poly2, normal);
            if (!overlaps(min1, min2)) {
                return false;
            }
        }
    }
    return true;
}

五、性能优化综合策略

5.1 检测频率控制

动态检测间隔：根据物体速度调整检测频率
空间分区：使用四叉树、网格或BVH进行空间管理
休眠机制：对静止物体降低检测频率

5.2 检测层级设计

粗略检测层：使用包围盒快速排除不可能碰撞
中级检测层：对可能碰撞对进行几何检测
精确检测层：对需要精确判断的对象进行像素检测

5.3 工具与框架推荐

Box2D：成熟的物理引擎，内置高效碰撞检测
Matter.js：轻量级物理引擎，适合2D游戏
DetectCollision：专用碰撞检测库

六、实际应用中的注意事项

6.1 浮点数精度问题

使用整数坐标或固定点数学
设置合理的碰撞容差值
避免在帧动画中进行大量浮点运算

6.2 多物体检测优化

采用空间哈希表减少检测对数量
实现广播相位检测（Broad Phase）
使用对象池管理检测对象

6.3 调试与可视化技巧

绘制碰撞边界辅助调试
实现碰撞日志记录系统
使用Chrome DevTools的性能分析工具

结论

Canvas小游戏开发中的碰撞检测是一个需要权衡精度与性能的复杂问题。开发者应根据项目需求选择合适的检测方法：矩形检测适合快速原型开发，圆形检测提供平滑交互体验，像素检测满足极致精度要求，而SAT算法则解决了复杂多边形检测难题。通过合理的性能优化和分层检测策略，即使在中低端设备上也能实现流畅的游戏体验。掌握这些核心技术，将显著提升Canvas小游戏的质量和市场竞争力。

深入Canvas游戏开发：几种核心碰撞检测技术解析

引言