JavaScript游戏开发如何实现物理引擎与碰撞检测算法

JavaScript游戏开发中，物理引擎负责模拟重力、速度、加速度等物理规则，碰撞检测算法则用于判定游戏内不同物体是否发生接触，二者共同决定了游戏的交互真实感。合理的物理模拟和碰撞判定能让玩家获得更流畅的操作体验，是2D、3D小游戏开发的核心技术点。

物理引擎的基础构成

轻量级的JavaScript物理引擎不需要实现复杂的物理规则，核心只需要处理刚体的基础运动模拟，主要包含以下几个部分：

• 刚体对象：存储物体的位置、速度、加速度、质量、尺寸等基础属性
• 运动更新模块：根据物理公式每帧更新刚体的位置和速度
• 碰撞检测模块：判定不同刚体是否发生碰撞
• 碰撞响应模块：处理碰撞后的速度变化、位置修正逻辑

常见碰撞检测算法

轴对齐包围盒（AABB）检测

这是2D游戏中最常用的碰撞检测算法，适合矩形物体，原理是判断两个矩形的x轴范围和y轴范围是否有重叠，算法复杂度低，适合大量物体的碰撞判定。

圆形碰撞检测

适合圆形物体，通过计算两个圆心之间的距离，和两圆半径之和做对比，距离小于半径和则判定碰撞，计算逻辑简单，性能开销小。

分离轴定理（SAT）检测

适合任意凸多边形物体，通过投影判断是否存在分离轴，能精确判定多边形之间的碰撞，算法复杂度较高，适合少量复杂形状物体的检测。

JavaScript实现示例

下面我们实现一个包含基础物理模拟和AABB碰撞检测的轻量物理引擎，模拟两个矩形方块的下落和碰撞过程。

刚体类定义

// 定义刚体类，存储物体的基础属性和运动方法
class RigidBody {
  constructor(x, y, width, height, mass = 1) {
    // 位置属性
    this.x = x;
    this.y = y;
    // 尺寸属性
    this.width = width;
    this.height = height;
    // 运动属性
    this.vx = 0; // x轴速度
    this.vy = 0; // y轴速度
    this.ax = 0; // x轴加速度
    this.ay = 0; // y轴加速度
    this.mass = mass; // 质量
    this.gravity = 0.5; // 重力加速度
    this.isStatic = false; // 是否为静态物体
  }

  // 更新运动状态，每帧调用
  update() {
    if (this.isStatic) return;
    // 应用重力加速度
    this.ay += this.gravity;
    // 更新速度
    this.vx += this.ax;
    this.vy += this.vy;
    // 更新位置
    this.x += this.vx;
    this.y += this.vy;
    // 重置加速度
    this.ax = 0;
    this.ay = 0;
  }

  // 获取AABB包围盒的四个边界
  getAABB() {
    return {
      left: this.x,
      right: this.x + this.width,
      top: this.y,
      bottom: this.y + this.height
    };
  }
}

AABB碰撞检测函数

// AABB碰撞检测函数，返回是否碰撞
function checkAABBCollision(bodyA, bodyB) {
  const a = bodyA.getAABB();
  const b = bodyB.getAABB();
  // 判断x轴和y轴范围是否有重叠
  const isXOverlap = a.left < b.right && a.right > b.left;
  const isYOverlap = a.top < b.bottom && a.bottom > b.top;
  return isXOverlap && isYOverlap;
}

// 碰撞响应处理，简单实现弹性碰撞的位置修正
function handleCollision(bodyA, bodyB) {
  if (bodyA.isStatic && bodyB.isStatic) return;
  const a = bodyA.getAABB();
  const b = bodyB.getAABB();
  // 计算重叠量
  const overlapX = Math.min(a.right - b.left, b.right - a.left);
  const overlapY = Math.min(a.bottom - b.top, b.bottom - a.top);
  // 修正位置，优先修正重叠量小的方向
  if (overlapX < overlapY) {
    if (!bodyA.isStatic) {
      bodyA.x += bodyA.vx > 0 ? -overlapX / 2 : overlapX / 2;
    }
    if (!bodyB.isStatic) {
      bodyB.x += bodyB.vx > 0 ? -overlapX / 2 : overlapX / 2;
    }
  } else {
    if (!bodyA.isStatic) {
      bodyA.y += bodyA.vy > 0 ? -overlapY / 2 : overlapY / 2;
      bodyA.vy = 0; // 碰撞后y轴速度归零，模拟地面碰撞
    }
    if (!bodyB.isStatic) {
      bodyB.y += bodyB.vy > 0 ? -overlapY / 2 : overlapY / 2;
      bodyB.vy = 0;
    }
  }
}

游戏主循环调用

// 初始化画布
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

// 创建刚体实例
const ground = new RigidBody(0, 550, 800, 50);
ground.isStatic = true; // 地面为静态物体

const box1 = new RigidBody(200, 50, 60, 60);
box1.vy = 2; // 初始下落速度

const box2 = new RigidBody(400, 100, 60, 60);
box2.vy = 1;

const bodies = [ground, box1, box2];

// 游戏主循环
function gameLoop() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 更新所有刚体状态
  bodies.forEach(body => body.update());
  // 检测碰撞
  for (let i = 0; i < bodies.length; i++) {
    for (let j = i + 1; j < bodies.length; j++) {
      if (checkAABBCollision(bodies[i], bodies[j])) {
        handleCollision(bodies[i], bodies[j]);
      }
    }
  }
  // 绘制所有刚体
  bodies.forEach(body => {
    ctx.fillStyle = body.isStatic ? '#666' : '#4CAF50';
    ctx.fillRect(body.x, body.y, body.width, body.height);
  });
  // 请求下一帧
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

算法选择建议

在实际开发中，需要根据游戏场景选择合适的碰撞检测算法：如果是大量矩形小物体的2D游戏，优先选择AABB算法，性能最优；如果是圆形弹珠类游戏，选择圆形碰撞检测即可；如果是包含不规则多边形的复杂游戏，再考虑使用SAT算法。物理引擎也不需要追求完整，只需要实现当前游戏需要的物理规则即可，避免过度设计导致性能浪费。

JavaScript物理引擎碰撞检测算法游戏开发修改时间：2026-07-23 01:12:32