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

实现刚体运动与碰撞检测是JavaScript中物理模拟的核心部分,常用于游戏开发、动画交互和可视化场景。虽然没有原生的物理引擎,但通过数学计算和定时更新,可以在Canvas或WebGL环境中模拟出逼真的物理行为。
刚体运动的基本原理
刚体是指在运动过程中形状和大小不变的物体。在JavaScript中,我们通常用对象来表示一个刚体,包含位置、速度、加速度、质量等属性。
运动遵循牛顿力学规律,主要通过以下公式更新状态:
- 速度更新:velocity += acceleration × deltaTime
- 位置更新:position += velocity × deltaTime
deltaTime一般取自requestAnimationFrame的时间间隔,确保运动平滑且与帧率无关。常见做法是在每一帧中累加受力(如重力、摩擦力),计算加速度(a = F/m),再更新速度和位置。
立即学习“Java免费学习笔记(深入)”;
常见的碰撞检测方法
碰撞检测用于判断两个物体是否发生接触。根据物体形状不同,检测方式也不同。
矩形与矩形碰撞(AABB)最常用的是轴对齐边界框(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)
适用于任意凸多边形,原理是寻找一个能将两图形完全分开的投影轴。若所有轴上投影都重叠,则发生碰撞。实现较复杂,但精度高。
碰撞响应与动量守恒
检测到碰撞后,需要调整物体运动状态,模拟反弹、滑动等效果。
简单弹性碰撞可基于动量守恒和能量守恒计算新速度。两个物体在一条直线上的碰撞公式为:
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,它们封装了复杂的物理计算,适合构建更复杂的交互场景。










