Canvas粒子碰撞效果：实现带物理反馈的交互系统

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节流，非关键帧跳过部分粒子的碰撞检查