答案：使用JavaScript和HTML5 Canvas可实现简易2D物理引擎，首先定义包含位置、速度、加速度和质量的Body类；接着在每帧更新中施加重力并更新物体状态；然后检测画布边界碰撞并反弹，同时处理物体间弹性碰撞，通过分离重叠与速度交换模拟动量守恒；最后利用requestAnimationFrame循环绘制动画。该系统虽简单，但完整呈现了物理引擎核心机制，包括力的累积、运动积分与碰撞响应，为扩展旋转、摩擦等特性奠定基础。
要实现一个简单的物理引擎，核心是模拟物体的运动和碰撞响应。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;
}
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. 添加重力和边界碰撞
在每一帧中对物体施加重力，并检测是否碰到画布边缘，发生反弹。
立即学习“Java免费学习笔记（深入）”；
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 物理模拟器。虽然没有使用复杂数学或第三方库，但它展示了物理引擎的基本原理。后续可扩展支持旋转、摩擦、多边形碰撞等特性。
