物理引擎如Matter.js可模拟重力、碰撞等真实物理效果，结合AABB或圆形碰撞检测实现精准交互；通过监听碰撞事件可自定义游戏逻辑，如角色踩踏击杀敌人；小型项目可用简单检测方法，复杂场景推荐成熟引擎以保证性能与手感。
在JavaScript游戏开发中，物理引擎和碰撞检测是实现真实感互动的核心部分。没有它们，角色会穿墙、物体不会下落、跳跃失去意义。要让游戏“动起来”，理解并正确使用物理系统至关重要。
物理引擎：让世界遵循规则
物理引擎负责模拟现实世界的力学行为，比如重力、速度、加速度、摩擦力等。在JavaScript中，常见的2D物理引擎有 Matter.js、Planck.js 和 Box2D.js（WebAssembly版本）。这些库帮你处理复杂的数学计算，只需定义物体属性，引擎自动更新位置和状态。
以 Matter.js 为例，创建一个带重力的场景非常简单：
const Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
<p>// 创建引擎
const engine = Engine.create();</p><p>// 创建渲染器
const render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 600,
wireframes: false
}
});</p><p>// 添加刚体
const ground = Bodies.rectangle(400, 600, 810, 60, { isStatic: true });
const ball = Bodies.circle(400, 100, 40);</p><p>World.add(engine.world, [ground, ball]);</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><p>// 启动引擎和渲染
Engine.run(engine);
Render.run(render);</p>这段代码创建了一个受重力影响的小球，落到静止的地面后会自然弹跳，这一切都由引擎自动处理。
碰撞检测：判断是否“碰到”
即使不使用完整物理引擎，简单的游戏也需要基础的碰撞检测。常见方法包括：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 矩形碰撞（AABB）：两个矩形在x和y轴上都有重叠，则发生碰撞。适合平台跳跃类游戏。
- 圆形碰撞：通过计算两圆心距离是否小于半径之和来判断。
- 像素级检测：精度高但性能消耗大，适用于对视觉准确性要求高的场景。
实现一个AABB碰撞检测函数非常直观：
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;
}
每次游戏循环调用此函数，即可响应角色与障碍物的接触。
结合引擎与自定义逻辑
物理引擎虽然强大，但有时需要额外控制。例如，在玩家踩到敌人头顶时触发击杀，而不是被弹开。这时可以监听碰撞事件，并根据对象类型执行不同逻辑：
Matter.Events.on(engine, 'collisionStart', function(event) {
const pairs = event.pairs;
for (let i = 0; i < pairs.length; i++) {
const bodyA = pairs[i].bodyA;
const bodyB = pairs[i].bodyB;
<pre class='brush:php;toolbar:false;'> if (bodyA.label === 'player' && bodyB.label === 'enemy') {
// 玩家从上方踩中敌人
if (bodyA.position.y < bodyB.position.y - 20) {
killEnemy(bodyB);
bouncePlayer(bodyA);
} else {
playerHit();
}
}
}});
这种混合方式既利用了引擎的稳定性，又保留了游戏机制的灵活性。
基本上就这些。掌握物理引擎的基本使用和碰撞原理，能让JavaScript游戏立刻变得生动。关键是选对工具——小型项目可用轻量库或手动检测，复杂交互建议直接集成成熟引擎。细节决定手感，别忘了调试可视化和性能优化。
