首页 > 文章 > 前端

JavaScript实现物理碰撞与运动模拟

时间：2025-09-29 16:25:50 369浏览收藏

**JavaScript实现简单物理引擎碰撞与运动模拟：打造你的专属2D世界** 想知道如何用JavaScript打造一个简易的2D物理引擎吗？本文将带你一步步实现，利用HTML5 Canvas，模拟重力、速度、加速度和基础碰撞。首先，我们将定义包含位置、速度、质量等属性的`Body`类，接着，在每一帧更新中施加重力并更新物体状态，然后检测画布边界碰撞并进行反弹模拟，同时处理物体间的弹性碰撞，通过分离重叠与速度交换模拟动量守恒。最后，利用`requestAnimationFrame`循环绘制动画，让你的物理世界动起来！掌握这些核心机制，为后续扩展旋转、摩擦等高级特性打下坚实基础。还在等什么？快来动手试试吧！

答案：使用JavaScript和HTML5 Canvas可实现简易2D物理引擎，首先定义包含位置、速度、加速度和质量的Body类；接着在每帧更新中施加重力并更新物体状态；然后检测画布边界碰撞并反弹，同时处理物体间弹性碰撞，通过分离重叠与速度交换模拟动量守恒；最后利用requestAnimationFrame循环绘制动画。该系统虽简单，但完整呈现了物理引擎核心机制，包括力的累积、运动积分与碰撞响应，为扩展旋转、摩擦等特性奠定基础。

如何利用 JavaScript 实现一个简单的物理引擎模拟碰撞和运动？

要实现一个简单的物理引擎，核心是模拟物体的运动和碰撞响应。JavaScript 结合 HTML5 Canvas 可以轻松完成这类可视化模拟。下面介绍如何用原生 JavaScript 实现一个包含重力、速度、加速度和基础碰撞检测的小型 2D 物理系统。

1. 定义基本物理对象

每个物体需要具备位置、速度、加速度、质量和尺寸等属性。使用一个类来封装这些信息：

class Body {
  constructor(x, y, vx = 0, vy = 0, mass = 1, radius = 20) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.ax = 0;
    this.ay = 0;
    this.mass = mass;
    this.radius = radius;
  }
<p>update(dt) {
// 更新速度：v = v + a <em> dt
this.vx += this.ax </em> dt;
this.vy += this.ay * dt;</p><pre class="brush:php;toolbar:false;">// 更新位置：x = x + v * dt
this.x += this.vx * dt;
this.y += this.vy * dt;

// 重置加速度（适用于每帧重新计算力）
this.ax = 0;
this.ay = 0;

}

applyForce(fx, fy) { // F = ma => a = F/m this.ax += fx / this.mass; this.ay += fy / this.mass; } }

2. 添加重力和边界碰撞

在每一帧中对物体施加重力，并检测是否碰到画布边缘，发生反弹。

function applyPhysics(bodies, ctx) {
  const gravity = 9.8;
  const damping = 0.7; // 碰撞后能量损失
  const width = ctx.canvas.width;
  const height = ctx.canvas.height;
<p>bodies.forEach(body => {
// 施加重力
body.applyForce(0, body.mass * gravity);</p><pre class="brush:php;toolbar:false;">// 更新状态
body.update(0.016); // 假设每帧约 16ms (60fps)

// 边界碰撞检测
if (body.x - body.radius < 0) {
  body.x = body.radius;
  body.vx *= -damping;
} else if (body.x + body.radius > width) {
  body.x = width - body.radius;
  body.vx *= -damping;
}

if (body.y - body.radius < 0) {
  body.y = body.radius;
  body.vy *= -damping;
} else if (body.y + body.radius > height) {
  body.y = height - body.radius;
  body.vy *= -damping;
}

}); }

3. 实现物体间碰撞检测与响应

当两个圆形物体靠近时，判断是否发生碰撞，并交换动量。

这里简化处理：当两圆心距离小于半径之和时，沿碰撞法线方向调整速度。

function resolveCollision(b1, b2) {
  const dx = b2.x - b1.x;
  const dy = b2.y - b1.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  const minDistance = b1.radius + b2.radius;
<p>if (distance < minDistance) {
// 碰撞发生，分离物体（防止粘连）
const overlap = minDistance - distance;
const separationX = (dx / distance) <em> overlap </em> 0.5;
const separationY = (dy / distance) <em> overlap </em> 0.5;</p><pre class="brush:php;toolbar:false;">b1.x -= separationX;
b1.y -= separationY;
b2.x += separationX;
b2.y += separationY;

// 计算碰撞后的速度（弹性碰撞，一维近似）
const nx = dx / distance;
const ny = dy / distance;

const v1n = b1.vx * nx + b1.vy * ny;
const v2n = b2.vx * nx + b2.vy * ny;

// 质量加权的速度交换（完全弹性）
const v1nFinal = (v1n * (b1.mass - b2.mass) + 2 * b2.mass * v2n) / (b1.mass + b2.mass);
const v2nFinal = (v2n * (b2.mass - b1.mass) + 2 * b1.mass * v1n) / (b1.mass + b2.mass);

// 修改速度分量
b1.vx += (v1nFinal - v1n) * nx;
b1.vy += (v1nFinal - v1n) * ny;
b2.vx += (v2nFinal - v2n) * nx;
b2.vy += (v2nFinal - v2n) * ny;

} }

4. 绘制与动画循环

使用 requestAnimationFrame 实现平滑动画。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
<p>// 创建几个小球
const bodies = [
new Body(200, 300, 50, 0, 1, 30),
new Body(300, 200, -30, 20, 2, 40),
new Body(400, 100, 0, 0, 1, 25)
];</p><p>function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);</p><p>applyPhysics(bodies, ctx);</p><p>// 检测所有物体之间的碰撞
for (let i = 0; i < bodies.length; i++) {
for (let j = i + 1; j < bodies.length; j++) {
resolveCollision(bodies[i], bodies[j]);
}
}</p><p>// 绘制每个物体
bodies.forEach(body => {
ctx.beginPath();
ctx.arc(body.x, body.y, body.radius, 0, Math.PI * 2);
ctx.fillStyle = 'steelblue';
ctx.fill();
ctx.stroke();
});</p><p>requestAnimationFrame(animate);
}</p><p>animate();</p>

基本上就这些。通过定义物理属性、更新运动状态、处理外力（如重力）、检测边界和物体间碰撞，就能构建出一个简易但有效的 2D 物理模拟器。虽然没有使用复杂数学或第三方库，但它展示了物理引擎的基本原理。后续可扩展支持旋转、摩擦、多边形碰撞等特性。

本篇关于《JavaScript实现物理碰撞与运动模拟》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

JavaScript 物理引擎 HTML5Canvas 碰撞运动模拟