JavaScript无内置物理引擎,常见第三方库有:①Matter.js(轻量2D);②Planck.js(高精度Box2D移植);③Cannon.js/es(3D刚体);④Ammo.js(功能全的Bullet移植)。
JavaScript 本身没有内置的物理引擎,所谓“JS 物理引擎”是指运行在浏览器或 Node.js 环境中的、用 JavaScript(或 WebAssembly)编写的第三方库,用于模拟刚体动力学——比如重力、速度、加速度、碰撞检测与响应。
它们各有侧重,适用于不同场景:
peScript、WebGL 兼容性更好)。重力在 Matter.js 中默认开启(y 轴正向向下,g = 1
默认值可通过 engine.world.gravity 修改:
engine.world.gravity.y = 0.8:减弱重力engine.world.gravity.y = 0:关闭重力(失重)engine.world.gravity.x = 0.3:添加水平方向重力(例如倾斜世界)注意:重力只影响具有 isStatic: false 和质量(mass 或 density)的刚体。静态物体(isStatic: true)不受重力影响。
Matter.js 自动处理碰撞检测与物理响应(如反弹、摩擦、恢复系数),你只需关注两个关键点:
restitution(弹性,0=完全不弹,1=完全弹性)、friction(摩擦力)、frictionAir(空气阻力)控制效果。例如:{ restitution: 0.7, friction: 0.01 } 让小球弹跳真实些。Events.on(engine, 'collisionStart') 获取碰撞对。示例:
Events.on(engine, 'collisionStart', (event) => {
const pairs = event.pairs;
for (let i = 0; i < pairs.length; i++) {
const pair = pairs[i];
if (pair.bodyA.label === 'player' && pair.bodyB.label === 'ground') {
console.log('玩家落地了');
}
}
});注意:碰撞事件不是每帧触发,而是每次新接触发生时触发一次;若需持续接触判断(如“是否正在触地”),应检查 body.position.y 或使用 body.bounds 手动检测,或借助 isSleeping 和接触状态辅助判断。
如果你只想手动实现最基础的下落与地面反弹(无旋转、无多物体交互),可这样写:
y += vy; vy += gravity;
y = canvasHeight - height; vy *= -0.8;(-0.8 实现反弹衰减)rect1.x rect2.x && ...(轴对齐包围盒,AABB)但这只是运动学模拟,缺乏质量、冲量、角动量等物理一致性,复杂场景强烈建议用成熟引擎。