手帐 Blog

主题

01 · 前端转游戏：路线图与本系列约定 ​

目标：建立「官方为真源」的学习法，说清两条技术路线，并锁定本系列三阶段顺序与边界。

1. 前端为什么有天然优势 ​

你已经熟悉的东西，正是 Web 游戏的底座：

前端概念游戏里对应什么
TypeScript / 模块化 / Vite引擎工程与打包
事件循环、requestAnimationFrame游戏主循环（Game Loop）
组件状态 / 生命周期场景、实体、状态机
Canvas / 合成层直觉2D 渲染与脏区意识

缺的主要是：固定时间步、向量与碰撞、对象池、编辑器工作流——本系列按阶段补。

2. 两条路线（精简对照） ​

路线一：Web 原生派（代码驱动） ​

工具定位
Phaser.js完整 2D 游戏引擎（精灵、物理、Tilemap、音频）——本系列阶段二首选
PixiJS极速 2D 渲染库，非完整引擎；本系列不深潜
Three.js / Babylon.js3D Web；本系列不深潜

适合：H5 / 页面内嵌互动、快速出 2D 小游戏、继续用 VS Code + Vite。

路线二：专业引擎派（编辑器驱动） ​

工具定位
Cocos CreatorTS + 可视化编辑器；国内微信/抖音小游戏主力——本系列阶段二后半
GodotGDScript/C#，独立游戏向；本系列不展开

适合：要 GUI 场景编辑、跨端打包、国内小游戏发行管线。

给前端的默认建议（本系列采纳）：业余快速出成品 → 先 Phaser；要碰国内小游戏生产流 → 再 Cocos。独立 Steam 向的 Godot 留给以后。

3. 本系列三阶段（已定） ​

text
阶段一  Canvas + rAF          → 理解游戏循环（01～05，本阶段正文已齐）
阶段二  Phaser 街机射击 → Cocos 对照  → 第一款完整小游戏（06～14）
阶段三  FSM / 对象池 / UI 解耦 → 架构模式（15～18）
阶段四  打包发布（微信 / Itch.io 等） → 本系列明确不做

阶段一验收形态与阶段二主题对齐：街机射击（玩家左右移动、向上射击、敌机下落、AABB 命中）。

4. 通用核心（无论用哪套引擎） ​

后面每一篇都会反复碰到，先记名字：

  1. Game Loop：每帧「读输入 → 更新逻辑 → 渲染」
  2. 向量与坐标系：位置、速度、屏幕原点（Canvas 左上）
  3. 状态机 FSM：Idle / Move / Attack，忌巨型 if-else
  4. 碰撞检测：阶段一用 AABB；引擎里换成物理/overlap

5. 官方真源地图（一级资料） ​

主题入口
CanvasMDN Canvas API
rAFMDN requestAnimationFrame
Phaser 3docs.phaser.io
Cocos Creatordocs.cocos.com

二级资料（博客 / 视频）永远低于官方。AI 只做「起草 → 你对照官方验收」。

6. 与 blog 其他文的边界 ​

  • 前端进阶/11 · Canvas：可视化 / DPR / 导出，不是游戏循环。
  • Journal 产品文档在 docs/：本系列不改手帐客户端。
  • 练习代码默认贴在文内；不强制仓库内 demos/ 工程。

验收清单 ​

  • [ ] 能用一句话说清：本系列为什么先 Phaser 后 Cocos
  • [ ] 能指出阶段四不在范围内
  • [ ] 收藏了 Canvas / rAF / Phaser / Cocos 四个官方入口
  • [ ] 知道阶段一终点是「无引擎迷你街机可玩 30 秒」

下一篇 ​

→ 02 · Canvas + requestAnimationFrame：最小可玩循环