JavaScript物理模拟：刚体运动与碰撞检测

本文深入浅出地讲解了如何在JavaScript中从零实现物理模拟的核心环节——刚体运动与碰撞检测，涵盖基于牛顿力学的位置/速度更新、重力与摩擦力等受力建模、AABB与圆形碰撞的高效判定算法、碰撞响应中的动量守恒计算与恢复系数调节，并提供了网格分区、四叉树等性能优化策略及避免穿透问题的实用技巧；无论你是想为Canvas游戏添加真实感，还是为数据可视化注入动态交互，这些扎实的数学原理与可运行代码都为你构建轻量、可控、可扩展的物理行为打下坚实基础。

实现刚体运动与碰撞检测是JavaScript中物理模拟的核心部分，常用于游戏开发、动画交互和可视化场景。虽然没有原生的物理引擎，但通过数学计算和定时更新，可以在Canvas或WebGL环境中模拟出逼真的物理行为。

刚体运动的基本原理

刚体是指在运动过程中形状和大小不变的物体。在JavaScript中，我们通常用对象来表示一个刚体，包含位置、速度、加速度、质量等属性。

运动遵循牛顿力学规律，主要通过以下公式更新状态：

• 速度更新：velocity += acceleration × deltaTime
• 位置更新：position += velocity × deltaTime

deltaTime一般取自requestAnimationFrame的时间间隔，确保运动平滑且与帧率无关。常见做法是在每一帧中累加受力（如重力、摩擦力），计算加速度（a = F/m），再更新速度和位置。

常见的碰撞检测方法

碰撞检测用于判断两个物体是否发生接触。根据物体形状不同，检测方式也不同。

最常用的是轴对齐边界框（Axis-Aligned Bounding Box），适用于无旋转的矩形：

function checkCollision(rect1, rect2) {
  return rect1.x  rect2.x &&
         rect1.y  rect2.y;
}

圆形与圆形碰撞

通过计算圆心距离与半径之和比较：

function checkCircleCollision(c1, c2) {
  const dx = c1.x - c2.x;
  const dy = c1.y - c2.y;
  const distance = Math.sqrt(dx*dx + dy*dy);
  return distance 
分离轴定理（SAT）
适用于任意凸多边形，原理是寻找一个能将两图形完全分开的投影轴。若所有轴上投影都重叠，则发生碰撞。实现较复杂，但精度高。
碰撞响应与动量守恒
检测到碰撞后，需要调整物体运动状态，模拟反弹、滑动等效果。
简单弹性碰撞可基于动量守恒和能量守恒计算新速度。两个物体在一条直线上的碰撞公式为：
v1' = (v1*(m1-m2) + 2*m2*v2) / (m1+m2)
v2' = (v2*(m2-m1) + 2*m1*v1) / (m1+m2)
实际中常引入恢复系数（bounce factor）控制弹性程度，值在0（完全非弹性）到1（完全弹性）之间。
对于二维情况，需分解速度为法线和切线方向，仅法线方向参与碰撞计算。
优化与实用建议
当物体数量增多时，逐对检测性能下降。可采用空间划分优化：

• 网格分区：将画布划分为格子，只检测同一格内的物体
• 四叉树：动态管理空间，快速查询附近物体

避免穿透问题（tunneling），可在高速运动时使用连续碰撞检测（CCD），或限制最大速度。

调试时可视化碰撞框和速度矢量，有助于发现逻辑错误。

基本上就这些，不复杂但容易忽略细节。掌握基础后，可尝试引入现成库如Matter.js或Planck.js，它们封装了复杂的物理计算，适合构建更复杂的交互场景。

理论要掌握，实操不能落！以上关于《JavaScript物理模拟：刚体运动与碰撞检测》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！