Canvas粒子碰撞物理反馈交互系统

Canvas粒子碰撞效果的核心不是让粒子“撞上就停”，而是模拟真实物理响应——反弹、偏转、能量衰减、甚至触发新行为。关键在于用边界框（BBox）做快速粗筛，再结合向量运算处理方向与速度变化。

在Canvas粒子碰撞的实现中，许多开发者习惯让两个粒子接触后直接反弹、速度取反，这种做法与真实物理机制存在较大差距。理想的碰撞效果应当模拟台球般的物理响应：粒子根据碰撞角度发生反弹与偏转，动能逐步衰减，甚至触发新的行为链条。而实现这一切的前提，是快速准确地判断“哪些粒子发生了碰撞”。

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