在 Web 开发中，实现实时 2D 物理模拟是提升互动体验的关键技术，而 Verlet 积分法因其稳定性和简单性，成为 Canvas 物理引擎的首选方案。这种方法无需显式存储速度，通过前后位置差值近似速度，避免了传统 Euler 积分的能量漂移问题，特别适合浏览器环境下的高帧率渲染。
Verlet 积分的核心在于位置更新公式：new_pos = 2 * current_pos - old_pos + acceleration * dt^2，其中old_pos记录上一步位置，acceleration包括重力、阻力等。该公式确保模拟长期稳定，例如在模拟弹力球时，重力g = [0, 0.2]像素 / 帧 ²，能自然产生下落弧线。约束系统进一步强化刚性：距离约束通过迭代拉伸 / 压缩粒子间距离至初始值rest_length，刚度stiffness=0.95控制响应速度，避免振荡。碰撞检测采用简单圆 - 圆与圆 - 墙算法：对于两球，若dist < r1 + r2，则沿法线交换相对速度乘以restitution=0.8（反弹系数）。
实际落地时，构建一个 Boing 式互动弹力球引擎需以下参数清单：
- 时间步长 (dt)：固定
1/60 ≈ 0.0167s，结合requestAnimationFrame同步更新，确保 60FPS。 - 粒子属性：质量
mass=1，半径r=10-20px，初始位置随机散布，速度vx,vy ∈ [-2,2]。 - 力场参数：重力
[0, 0.15-0.3]，空气阻力drag=0.99（速度 *= drag），鼠标约束：吸引距离内粒子向光标移动，强度k=0.01。 - 约束迭代：每帧 10-20 次迭代，公式
correction = (current_dist - rest_length) / current_dist * stiffness，沿连接向量应用pos1 -= correction * (pos2 - pos1)。 - 碰撞响应：墙壁反弹
vy *= -restitution if y > height - r，球间：计算相对速度v_rel = v1 - v2，投影法线n = (pos2 - pos1).normalize()，冲量impulse = 2 * v_rel.dot(n) / (1/m1 + 1/m2) * restitution，更新速度。
为优化性能，限制粒子数 <500，避免 O (n²) 碰撞全扫描：采用空间哈希格子（cell_size=50px），仅检查邻格碰撞。绘制层级：先清屏ctx.clearRect(0,0,w,h)，后画轨迹ctx.stroke()，最后球体ctx.fillStyle='hsl('+hue+',100%,50%)'; ctx.arc()渐变阴影提升视觉。边界处理：虚拟墙约束或反射。
潜在风险包括过迭代导致滞后（上限 20 次），或 dt 不稳引起抖动（substepping：多步小 dt）。回滚策略：fallback Euler 仅碰撞帧，监控 FPS<30 降级粒子数。扩展方向：角度约束建绳索 / 布料，WebGPU 加速碰撞。
该实现源于 greg.technology 作品集中的互动 demo，结合 Verlet JS 库原理。1 HN 讨论强调其在 2D 游戏的适用性。2
（正文约 1050 字）