2025年11月22日 web

纯 JS 实现浏览器小 RPG 引擎核心循环

用原生 Canvas 和 JS 构建小 RPG：tilemap 渲染、精灵动画、键盘输入、遭遇生成、实时弹幕战斗状态机，实现完整浏览器游戏循环。

内容加载中...

在浏览器中用纯原生 JavaScript 和 Canvas API 实现一个小 RPG 引擎，是一个高效且轻量的方案，尤其适合快速原型验证和独立开发者。这种方法避免了引入第三方游戏框架如 Phaser 或 PixiJS 的依赖，充分利用浏览器原生能力，实现 tilemap 渲染、精灵动画、键盘输入处理、简单碰撞检测、遭遇生成以及状态机驱动的战斗系统，形成一个完整的游戏循环。

引擎架构：状态机驱动的场景切换

小 RPG 的核心是两个主要场景：overworld（大地图探索）和 battle（战斗）。我们用一个简单的有限状态机（FSM）来管理它们：

const gameState = {
  current: 'overworld', // 'overworld' | 'battle'
  switchTo(state) {
    this.current = state;
    // 清理/初始化对应场景资源
  }
};

游戏主循环用 requestAnimationFrame 驱动，每帧更新逻辑、渲染画面：

function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}

这种架构确保了平滑的 60FPS 循环，参数建议：目标帧率 60，deltaTime 控制为 performance.now() - lastTime 以适应不同设备。

在 overworld 场景，玩家用 WASD 或方向键移动，视野固定全图显示（无相机滚动），地图尺寸建议 32x24 tiles（每 tile 16x16px），总分辨率 512x384px，适配现代浏览器。

Tilemap 渲染：高效 2D 数组转 Canvas

Tilemap 是 overworld 的基础，用二维数组表示地图数据，每元素为 tile ID（0=草地，1=村落等）。预加载 sprite sheet（一图多用，减少 drawImage 调用）：

const TILE_SIZE = 16;
const mapData = [
  [0,0,1,0,...], // 行数据
];
const tileset = new Image(); tileset.src = 'tiles.png'; // 256x16px sheet

function renderTilemap(ctx) {
  for (let y = 0; y < mapData.length; y++) {
    for (let x = 0; x < mapData[y].length; x++) {
      const tileId = mapData[y][x];
      ctx.drawImage(tileset, tileId * TILE_SIZE, 0, TILE_SIZE, TILE_SIZE,
                    x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
    }
  }
}

渲染性能关键：Canvas 尺寸固定，offscreen Canvas 预渲染静态地图层，动态层（如遭遇星）叠加。实际测试，在 Chrome 下 1000+ tiles 轻松 60FPS。风险：IE 老版本无 ImageBitmap，fallback 用 drawImage。

精灵动画：Sprite Sheet 与帧控制

玩家和敌人用 pixel art 精灵表动画。每个精灵有 frames 数组，当前帧 frameIndex，动画速度 animSpeed = 0.1（每帧递增，>=1 换帧）：

const player = {
  x: 160, y: 192, // 像素坐标
  vx: 0, vy: 0, speed: 2,
  sprite: { sheet: playerImg, frameW: 16, frameH: 16, frames: 4, frameIndex: 0, animTimer: 0 }
};

function updatePlayer() {
  // 键盘输入
  const keys = { w: vy -= speed, s: vy += speed, a: vx -= speed, d: vx += speed };
  player.x += vx; player.y += vy;
  // 边界碰撞
  player.x = Math.max(0, Math.min(canvas.width - 16, player.x));
  
  // 动画更新
  player.sprite.animTimer += 0.1;
  if (player.sprite.animTimer >= 1) {
    player.sprite.frameIndex = (player.sprite.frameIndex + 1) % player.sprite.frames;
    player.sprite.animTimer = 0;
  }
}

渲染：

function renderSprite(ctx, sprite, x, y) {
  ctx.drawImage(sprite.sheet,
    sprite.frameIndex * sprite.frameW, 0, sprite.frameW, sprite.frameH,
    x, y, sprite.frameW, sprite.frameH);
}

参数清单：speed=2px/frame（移动感适中），animSpeed=0.1（8帧/秒），frameW/H=16（pixel perfect）。这模拟了文章中 diamond-shaped 玩家光标，但扩展为带动画的角色。[1]

遭遇生成与输入处理

遭遇用闪烁星（蓝色/红色），随机生成在地图区：

const encounters = [];
function spawnEncounter(x, y, type = 'battle') { // 'battle' | 'lore'
  encounters.push({ x, y, type, flashTimer: 0 });
}

function updateEncounters() {
  encounters.forEach((enc, i) => {
    enc.flashTimer += 0.05; // 闪烁
    if (collides(player, enc)) {
      if (enc.type === 'battle') gameState.switchTo('battle');
      encounters.splice(i, 1);
    }
  });
}

键盘用 addEventListener('keydown')，preventDefault 防滚动。简单 A* 寻路可选用于敌 AI，但小地图直线移动足矣（grid-based BFS，openSet 用 Set，gScore/hScore）：

function aStar(start, goal) { /* 标准实现，heuristic: Math.abs(dx)+Math.abs(dy) */ }

阈值：遭遇 spawnRate=0.01/帧（每 100 帧一星），存活 300 帧。

状态机战斗系统：实时弹幕躲避

战斗 FSM 状态：'playerTurn', 'enemyAttack', 'playerAttack'。玩家光标移动躲 projectile，撞红攻击区 deal damage。

const battleState = {
  current: 'enemyAttack',
  playerHP: 100, enemyHP: 200,
  projectiles: [], attackZones: [],
  cursor: { x: 100, y: 100, speed: 4 }
};

function updateBattle() {
  switch (battleState.current) {
    case 'enemyAttack':
      spawnProjectiles(3, enemyPattern()); // 渐显模式
      battleState.current = 'playerTurn';
      break;
    case 'playerTurn':
      updateCursor(); // 键盘移动
      checkAttackZones(); // 碰撞伤害
      checkProjectiles(); // 玩家躲避碰撞
      if (playerHP <= 0) { /* 死亡，掉 exp，回 overworld */ }
      break;
  }
}

敌人攻击模式：wave1 直线，wave2 曲线（sin），渐显：alpha 从 0->1。奖励公式：exp = base * (currentHP / maxHP)，鼓励无伤（Excellence）。

参数：cursor speed=4（更快响应），projectile speed=3，attackZone lifespan=120 帧。背景根据区切换（drawImage full bg）。

升级与游戏循环完整性

村落碰撞进入菜单：exp 换 HP/speed/attack（成本递增：lv*n^2）。死亡掉 50% exp。

完整循环：init -> overworld loop -> spawn encounter -> battle FSM -> victory exp -> back overworld -> repeat -> boss。

监控点：FPS <50 降 spawnRate；移动端 touch 替代键盘（virtual joystick）。

这种 vanilla JS 方案总代码 <2000 行，部署单 HTML。相比引擎，轻 100KB，加载瞬时。[1] 作者用 KAPLAY 加速美术迭代，但核心如上可纯 JS 实现。实际开发，先 mock 数据，后加音效（Web Audio）。

资料来源： [1] https://jslegenddev.substack.com/p/making-a-small-rpg - 开发日志与灵感。 [2] MDN Canvas API - 渲染基础。