如何用JavaScript构建一个简单的游戏引擎？

用JavaScript构建一个简单的游戏引擎，核心在于把游戏循环、渲染和对象管理这三件事理清楚。借助浏览器原生的canvas接口，我们可以在不依赖任何第三方库的情况下，写出能跑起来的最小引擎。

一、游戏引擎的基本结构

一个最基础的游戏引擎通常包含以下几个部分：

• 游戏循环（Game Loop）：不断刷新画面和更新逻辑
• 渲染器（Renderer）：把对象画到canvas上
• 实体（Entity）：游戏里运动的物体，比如玩家和敌人
• 输入处理（Input）：监听键盘或鼠标事件

二、搭建游戏循环

游戏循环是引擎的心脏。我们用requestAnimationFrame来驱动每一帧，并在其中调用更新和绘制方法。

// 简单游戏引擎的循环示例
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

let lastTime = 0;
function gameLoop(timestamp) {
  const deltaTime = timestamp - lastTime;
  lastTime = timestamp;

  update(deltaTime);   // 更新逻辑
  render(ctx);         // 绘制画面

  requestAnimationFrame(gameLoop);
}

function update(dt) {
  // 这里写位置更新等逻辑
}

function render(context) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 这里写绘制逻辑
}

requestAnimationFrame(gameLoop);

三、定义一个可复用的实体类

实体是游戏中的基本单位。下面用一个简单的类来管理坐标和尺寸，方便后续扩展。

// 基础实体类
class Entity {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.vx = 0;
    this.vy = 0;
  }

  update(dt) {
    this.x += this.vx * dt / 16;
    this.y += this.vy * dt / 16;
  }

  draw(context) {
    context.fillRect(this.x, this.y, this.width, this.height);
  }
}

四、处理键盘输入

通过监听keydown和keyup，我们可以控制实体的移动方向。下面用一个对象来记录按键状态。

// 键盘输入管理
const keys = {};
window.addEventListener('keydown', (e) => {
  keys[e.code] = true;
});
window.addEventListener('keyup', (e) => {
  keys[e.code] = false;
});

// 在update里使用
function update(dt) {
  if (keys['ArrowLeft']) player.vx = -2;
  else if (keys['ArrowRight']) player.vx = 2;
  else player.vx = 0;

  player.update(dt);
}

五、把各部分组合到一起

最后，我们创建玩家实体，并在循环中调用它的更新与绘制，一个能左右移动的方块就完成了。

const player = new Entity(50, 50, 30, 30);

function update(dt) {
  if (keys['ArrowLeft']) player.vx = -3;
  else if (keys['ArrowRight']) player.vx = 3;
  else player.vx = 0;

  player.update(dt);
}

function render(context) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  player.draw(context);
}

六、小结

上面这些代码已经构成一个能用的迷你引擎骨架。你可以在Entity类里加碰撞检测，在render里换图片，慢慢扩展成完整小游戏。理解这种结构后，再看主流引擎就不会觉得黑盒了。

JavaScript游戏引擎canvas修改时间：2026-07-27 13:18:18