bubbly-bg不能做碰撞检测，因其仅基于Canvas 2D渲染装饰性气泡，无物理状态与判定逻辑，每帧仅重绘不维护空间关系；需用Matter.js等物理引擎叠加实现碰撞效果。
气泡背景库bubbly-bg本身不提供碰撞检测功能，它只负责渲染动态气泡动画，所有气泡之间无物理交互逻辑，也不会与页面其他元素产生碰撞响应。
为什么bubbly-bg不能做碰撞检测
bubbly-bg的核心设计目标是轻量、高效地呈现视觉装饰效果，整个实现基于Canvas 2D绘制，气泡对象仅存储位置、半径、速度等渲染所需属性，【完全没有物理状态（如质量、加速度、碰撞体形状）和碰撞判定逻辑】。它的每一帧只是清空画布→重绘所有气泡→更新坐标，不维护任何空间索引或交集计算。
试图在bubbly-bg上“添加”碰撞检测，相当于给一张不断重绘的静态图强行注入物理引擎能力——技术路径完全错位。
替代方案：用真实物理引擎叠加气泡视觉
若需气泡具备碰撞行为（例如气泡撞到容器边缘反弹、彼此弹开），必须引入独立物理引擎，再将气泡视觉绑定到物理实体上。推荐组合：Bullet + bubbly-bg 或 Matter.js + 自定义Canvas绘制。
方法一：用Matter.js驱动气泡物理，Canvas绘制视觉
① 创建Matter.World实例，关闭默认渲染器（避免覆盖bubbly-bg的Canvas）；
② 为每个气泡创建Matter.Bodies.circle对应刚体，设置friction:0、restitution:0.8、isStatic:false；
③ 在requestAnimationFrame循环中：先调用Matter.Engine.update()推进物理模拟 → 再遍历所有body，用ctx.beginPath()→arc()→fill()把气泡位置/大小同步绘制到同一Canvas上；
④ 【关键前提：bubbly-bg必须禁用自动动画，否则其内部draw()会清空你刚画好的物理气泡】，可通过初始化时传入{ animate: false }关闭。
方法二：用Three.js + Cannon-es构建3D气泡碰撞
这一步操作起来很简单，直接把气泡材质贴到Cannon-es球体上，用THREE.Mesh配合CANNON.Body联动更新位置即可。但要注意：Three.js渲染层与bubbly-bg的2D Canvas互不兼容，必须弃用bubbly-bg，改用自定义ShaderMaterial模拟气泡光泽感。
