当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现物理碰撞与运动模拟

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

2025-09-29 16:25:50 0浏览收藏

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;
  }
update(dt) {
// 更新速度：v = v + a  dt
this.vx += this.ax  dt;
this.vy += this.ay * dt;
// 更新位置：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;
bodies.forEach(body => {
// 施加重力
body.applyForce(0, body.mass * gravity);
// 更新状态
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;
if (distance < minDistance) {
// 碰撞发生，分离物体（防止粘连）
const overlap = minDistance - distance;
const separationX = (dx / distance)  overlap  0.5;
const separationY = (dy / distance)  overlap  0.5;
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;
// 创建几个小球
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)
];
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
applyPhysics(bodies, ctx);
// 检测所有物体之间的碰撞
for (let i = 0; i < bodies.length; i++) {
for (let j = i + 1; j < bodies.length; j++) {
resolveCollision(bodies[i], bodies[j]);
}
}
// 绘制每个物体
bodies.forEach(body => {
ctx.beginPath();
ctx.arc(body.x, body.y, body.radius, 0, Math.PI * 2);
ctx.fillStyle = 'steelblue';
ctx.fill();
ctx.stroke();
});
requestAnimationFrame(animate);
}
animate();

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

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

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