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

刚体运动通过牛顿力学公式更新位置与速度，结合重力、摩擦力等受力计算；碰撞检测常用AABB判断矩形碰撞，通过圆心距与半径和比较判断圆形碰撞，实现JavaScript物理模拟。

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

刚体运动的基本原理

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

常见的碰撞检测方法

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

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

function checkCollision(rect1, rect2) {
  return rect1.x < rect2.x + rect2.width &&
         rect1.x + rect1.width > rect2.x &&
         rect1.y < rect2.y + rect2.height &&
         rect1.y + rect1.height > 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 < c1.radius + c2.radius;
}

分离轴定理（SAT）

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

39

查看详情

适用于任意凸多边形，原理是寻找一个能将两图形完全分开的投影轴。若所有轴上投影都重叠，则发生碰撞。实现较复杂，但精度高。

碰撞响应与动量守恒

检测到碰撞后，需要调整物体运动状态，模拟反弹、滑动等效果。

简单弹性碰撞可基于动量守恒和能量守恒计算新速度。两个物体在一条直线上的碰撞公式为：

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物理模拟_刚体运动与碰撞检测的详细内容，更多请关注php中文网其它相关文章！