手帐 Blog

主题

游戏开发教程系列 ​

面向：已有 TypeScript / 前端工程经验，想用 Web 栈做小游戏、再对照迁到国内小游戏引擎的学习者。
原则：官方文档优先；先理解游戏循环，再上引擎；一事一文，有验收清单。
本系列顺序：Canvas 原生 → Phaser 街机射击 → Cocos 对照 → 架构模式。不做阶段四（打包发布）。
进度：阶段一、阶段二正文已齐（01～14）；阶段三 15～18 待写。

怎么读 ​

节奏建议
平日 40～60′读 1 篇 + 敲文内代码块到本机 Vite 项目
周末冲当前阶段里程碑（05 迷你街机 / 10 Phaser 一关 / 18 架构复盘）
卡壳时先打开文内「官方入口」，再问 AI；把 AI 答案对照官方验收
与算法/Go 并行时游戏线用周里程碑，不与主线抢每日配额

与「前端进阶 · Canvas」的关系 ​

前端进阶/11 · Canvas 与 2D 可视化 讲的是图表 vs 自绘、DPR、海报导出。
本系列阶段一专写 Game Loop、逻辑帧、输入、AABB 碰撞——同一 API，不同目标。建议：可视化篇扫过即可，本系列从 01 按序做。

技术路线（已定） ​

text
阶段一 Canvas + rAF（01～05）
    → 阶段二 Phaser 3 + TS：街机射击完整小游戏（06～10）
    → 阶段二后半 Cocos Creator + TS：同玩法对照（11～14）
    → 阶段三 FSM / 对象池 / UI 解耦（15～18）
    ✕ 阶段四（打包 / 微信导出 / Itch.io —— 本系列不做）

两条大路线里，本系列走 Web 代码派（Phaser）→ 商业小游戏派（Cocos）；Godot / Pixi / Babylon 仅作对照提及，正文不展开。

文章索引（建议顺序） ​

阶段一 · 原生理解游戏循环（01～05） ​

#文档你学完应能做什么
01前端转游戏：路线图与本系列约定说清 Web 派 vs 编辑器派；本系列顺序；官方真源地图
02Canvas + requestAnimationFrame：最小可玩循环Vite+TS 起项目；固定画布；rAF 循环；dt 概念
03渲染帧与逻辑帧：别把一切塞进一帧固定步长 / 累加器；插值直觉；为何会「快机器上更快」
04输入与实体：键盘控制的可移动方块事件与状态分离；实体 {x,y,vx,vy}；边界钳制
05AABB 碰撞 + 迷你街机原型（验收）矩形碰撞；玩家射击 / 敌机下落 / 命中消除；无引擎可玩 30s

阶段二 · Phaser 再 Cocos（06～14） ​

#文档你学完应能做什么
06Phaser 3 + TypeScript 工程脚手架Vite 装 Phaser；Boot 生成色块纹理；双场景启动
07场景、精灵与 Arcade 物理入门说清 create/update；物理精灵速度与撞世界边界
08街机射击：玩家移动与射击键盘移动；子弹 Group + 冷却；出屏回收
09街机射击：敌人波次与碰撞定时刷敌；overlap 得分与撞玩家失败
10街机射击：完整一关验收HUD + Game Over + R 重启；对齐 05 规格
11Cocos Creator 入门：编辑器与 TS 组件3.x 建项目；挂组件；对照 Phaser 生命周期
12Cocos 对照：同玩法最小迁移Prefab + Physics2D 接触；同玩法可玩 30s
13Phaser ↔ Cocos 心智对照表口述引擎对应；说清何时选谁
14阶段二复盘：第一款完整小游戏清单自检达标；知道阶段三入口与阶段四边界

阶段三 · 核心架构模式（15～18，待写） ​

#文档（拟定）侧重点
15有限状态机 FSM：Idle / Move / Attack角色或敌人状态，忌巨型 if-else
16对象池：子弹与敌人的创建销毁GC 卡顿直觉；池化实现
17数据驱动与 UI 解耦：血条/分数逻辑层事件 → UI 层订阅
18阶段三复盘与后续可选方向收束；发布属阶段四，本系列止步

官方总入口（收藏） ​

与 blog 其他文档的关系 ​

  • 履历 / 暑期总计划在 blog/ 根目录；本目录放 游戏自学教程与笔记。
  • Journal 产品方案在 docs/spec/；本系列只用「前端转游戏」场景，不改产品客户端。
  • 练习代码默认写在文内代码块；若日后集中成可跑仓库，可另建 blog/游戏/demos/（本批不建）。