🎮 实战项目

预计阅读 3 分钟

📋版本信息

最后更新：2026-07-09 · 适用基础库：≥ 3.9.0（最低兼容 ≥ 2.30.0）· 微信开发者工具：稳定版 1.06+

贯穿全教程的实战项目，从 0 到 1 构建一个完整的微信小游戏。

---

🎯 项目概览

我们选择了一个经典的简化版 Flappy Bird 作为贯穿实战项目，原因如下：

• ✅ 玩法简单 — 点击/触碰飞行，避开障碍物，逻辑清晰
• ✅ 覆盖全面 — 涉及渲染、物理、碰撞、音效、UI、状态管理、数据存储
• ✅ 适合入门 — 2-3 天即可完成核心玩法，可以快速迭代扩展
• ✅ 商业可扩展 — 易于添加皮肤系统、排行榜、分享功能、广告变现

📦 项目结构

flappy-bird-minigame/
├── assets/
│   ├── textures/          # 贴图资源
│   │   ├── bird.png
│   │   ├── pipe.png
│   │   └── bg.png
│   ├── sounds/            # 音效资源
│   └── fonts/             # 字体资源
├── scripts/
│   ├── GameManager.ts     # 游戏管理器（核心）
│   ├── Bird.ts            # 小鸟控制器
│   ├── PipeManager.ts     # 管道管理器
│   ├── UIManager.ts       # UI 管理器
│   └── ScoreManager.ts    # 分数管理器
├── scenes/
│   ├── Start.scene        # 开始界面
│   ├── Game.scene         # 游戏主场景
│   └── GameOver.scene     # 游戏结束界面
├── game.json              # 小游戏配置
└── project.config.json    # 项目配置

🔰 入门阶段 — 原生 Canvas 2D 实现

🔄前端对比：Canvas 游戏 vs 传统 Web 开发

传统前端开发流程：

1. 设计 DOM 结构（HTML）
2. 编写样式（CSS）
3. 实现交互逻辑（JavaScript）
4. 用户触发事件 → 更新数据 → 框架自动渲染

Canvas 游戏开发流程：

1. 初始化 Canvas 画布
2. 启动游戏循环（60fps）
3. 每帧：处理输入 → 更新状态 → 检测碰撞 → 绘制画面
4. 没有"组件"，只有"游戏对象"手动管理生命周期

核心差异：游戏中没有浏览器帮你做渲染——你需要完全控制每一帧的内容。

核心代码预览

// GameManager.ts — 游戏主循环
class GameManager {
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D
  private bird: Bird
  private pipes: PipeManager
  private isRunning: boolean

  constructor() {
    this.canvas = wx.createCanvas()
    this.ctx = this.canvas.getContext('2d')
    this.bird = new Bird()
    this.pipes = new PipeManager()
    this.isRunning = false
  }

  // 游戏主循环 — 每一帧执行一次
  private gameLoop = (): void => {
    if (!this.isRunning) return

    // 1. 处理输入（在 wx.onTouchStart 中捕获）
    // 2. 更新游戏状态
    this.bird.update()
    this.pipes.update()

    // 3. 碰撞检测
    if (this.checkCollision()) {
      this.gameOver()
      return
    }

    // 4. 渲染
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    this.pipes.render(this.ctx)
    this.bird.render(this.ctx)

    // 5. 请求下一帧
    requestAnimationFrame(this.gameLoop)
  }

  start(): void {
    this.isRunning = true
    this.gameLoop()
  }

  private checkCollision(): boolean {
    // AABB 碰撞检测算法
    const birdRect = this.bird.getBounds()
    for (const pipe of this.pipes.getActive()) {
      if (this.rectIntersect(birdRect, pipe.getBounds())) {
        return true
      }
    }
    return false
  }

  private rectIntersect(a: Rect, b: Rect): boolean {
    return (
      a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y
    )
  }

  private gameOver(): void {
    this.isRunning = false
    // 更新 UI、保存分数
  }
}

⚡ 进阶阶段 — Cocos Creator + 微信能力集成

在入门篇基础上，进阶篇将使用 Cocos Creator 重写项目，并集成：

• 💬 微信分享 — 分享战绩到微信群/朋友圈
• 🏆 排行榜 — 使用微信云开发实现好友排行
• 📺 激励视频广告 — 死亡后观看广告复活
• 💾 云存储 — 用户数据、游戏进度云端同步
• 🌐 分包加载 — 将资源分包，控制首包体积

🏆 精通阶段 — 商业化与发布

精通阶段将完成：

• 📊 数据埋点 — 用户行为分析，优化留存
• 🎨 皮肤系统 — 内购皮肤，增加收入来源
• 🏅 成就系统 — 提升用户粘性
• 🔄 A/B 测试 — 广告位优化、价格测试
• 📦 包体优化 — 确保提交包体 < 4MB

---

📂 源码获取

完整的实战项目源码将在各章节中逐步给出。最终完整版本将在 GitHub 仓库中提供。

---

📚 附录资源

页面	内容
📖 术语表	游戏开发核心概念速查，引擎/平台/通用三领域分类
🛠️ 资源清单	官方文档、学习资源、免费素材、美术/音效工具
❓ 常见问题	环境搭建、性能优化、审核发布、变现、引擎选型 FAQ

---

🧩 跨引擎概念映射

📋不同引擎中的等价概念

对于多引擎学习者，以下是关键概念的跨引擎对照表：

概念	Cocos Creator	Unity	LayaAir	原生 Canvas
游戏对象	Node	GameObject	Sprite/Node	手动管理对象
组件	Component	MonoBehaviour	Script	无对应
场景	Scene	Scene	Scene	画面状态机
生命周期	onLoad/start/update	Awake/Start/Update	onAwake/onStart/onUpdate	手动管理
碰撞检测	Collider2D	Collider2D	Physics	手写 AABB/SAT
预制体	Prefab	Prefab	Prefab	无对应
资源加载	resources.load	Resources.Load	Laya.loader.load	Image.onload 等

掌握这些概念映射后，切换引擎无非是学习新的 API 名称和编辑器操作。