🎮 Flappy Bird 实战项目

预计阅读 3 分钟

Flappy Bird 是贯穿本教程的实战项目。它虽然简单，却涵盖了游戏开发的核心要素：游戏循环、碰撞检测、UI 系统、状态管理、音频、广告变现。

---

项目分阶段讲解

阶段	文档	技术栈	目标
🔰 入门	原生 Canvas 2D 实现	Canvas 2D + TypeScript	理解游戏循环、碰撞、状态机
⚡ 进阶	Cocos Creator 重写	Cocos Creator 3.8.x	学习引擎组件化开发、分包
🏆 精通	商业化集成	微信 API	广告、支付、数据埋点
❓ FAQ	项目常见问题	—	排错指南

---

原生 Canvas 版本预览

入门版本使用纯 Canvas 2D + 几何图形绘制，无需任何外部图片资源，可直接在微信开发者工具中运行。核心特点：

• 小鸟：圆形 + 三角形（嘴）的几何组合
• 管道：带顶帽的绿色矩形
• 分数：Canvas 原生文字渲染
• UI 面板：半透明遮罩 + 按钮

进阶 Cocos 版本

Cocos Creator 3.8.x 版本引入引擎的场景、节点、组件、预制体等概念，并集成微信能力：分享、排行榜、激励视频。

精通版本

商业化版本在 Cocos 版本基础上增加完整的广告变现、皮肤内购、数据埋点和 A/B 测试。

---

✨学习建议

建议按「入门 → 进阶 → 精通」顺序阅读，先理解底层原理再用引擎提效。入门版的代码约 300 行，2-3 小时内可以完整写一遍。