Canvas粒子碰撞效果的核心并非简单“碰撞即停”，而是模拟真实物理响应——反弹、偏转、能量衰减乃至触发新行为。关键在于利用边界框（BBox）进行快速粗筛，再结合向量运算处理方向与速度变化。
坦白说，很多人在实现粒子碰撞时，习惯让两个球撞到一起就“啪”一下弹开，速度直接取反——这跟真实物理效果相差甚远。真正的碰撞效果，需要让粒子像台球那样：该反弹的反弹、该偏转的偏转，能量也会逐渐衰减，甚至碰撞后还能触发新的行为。而这一切的基础，就是快速判断“谁和谁发生了碰撞”。
借助BBox实现高效碰撞检测
Canvas本身没有内置碰撞API，全依赖手动计算。Motion Canvas这类框架虽然封装了BBox类，但原生实现其实只需四行比较：
- 获取两个粒子的矩形包围区域——左、右、上、下四边界坐标
- 判断是否重叠：
left < other.right && right > other.left && top < other.bottom && bottom > other.top - 只要重叠，就视为发生碰撞，可立即调用响应逻辑
- 为避免连续帧重复触发（例如两个粒子卡在一起反复弹跳），建议添加“已碰撞”标记，或设置最小间隔时间
碰撞后的物理反馈计算方法
单纯将速度取反（比如v.x = -v.x）过于生硬，看起来像在打乒乓球。要获得更自然的效果，需按如下方式处理：
- 根据碰撞角度调整反射方向：利用向量点积或法线投影，计算新的速度矢量
- 引入弹性系数（例如0.7～0.95），每次反弹损失部分动能：
v *= elasticity - 对于质量不同的粒子，按质量比例分配动量——大粒子被撞后几乎不动，小粒子则直接飞出去
- 如果鼠标作为动态“力场源”，可按距离施加吸引力或排斥力，叠加到粒子的加速度中
提升交互反馈感的细节设计
用户感知到的不仅是“撞上了”，而是“系统在回应我”。以下细节能大幅增强沉浸感：
- 碰撞瞬间将粒子尺寸放大一点，并短暂变亮，模拟冲击感
- 配合轻量级音效（使用Web Audio API，虽非必需但很加分）
- 触发小范围粒子爆发——例如在碰撞点生成3～5个高速飞散的小粒子，如同打碎了一个玻璃球
- 如果是连线粒子系统，碰撞后可临时断开连接线，0.2秒后渐显恢复，让视觉上形成“断开→重组”的节奏
性能优化不止于减少粒子数量
1000个粒子做两两检测，运算量可达百万级。真正可行的优化方案并非只降低粒子数量：
- 空间分区：采用二维网格将画布分成小块，仅检测同一格及相邻8格内的粒子
- 距离阈值提前过滤：先计算欧氏距离的平方（避免开方运算），超出阈值直接跳过BBox检测
- 将静止粒子（如背景装饰）设为不可碰撞，或单独归类不参与动态检测
- 利用
requestAnimationFrame进行节流，非关键帧跳过部分粒子的碰撞检查
