Canvas粒子碰撞效果的核心是模拟真实物理响应，包括反弹、偏转、能量衰减及触发新行为；通过BBox粗筛与向量运算实现高效检测与自然反馈，并辅以视觉音效等细节提升交互感，再结合空间分区等优化策略保障性能。
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节流，非关键帧跳过部分粒子的碰撞检查
