用 Codex 做游戏

一个周末,用 Claude Codex 从零做出 5 个网页小游戏。技术选型、素材生成、自动化测试、一键部署全流程。

成果展示

一个周末,用 Codex 从 0 到 1 做了 5 个小游戏和项目:

顺带还做了一个作品收录站:

  • 发现有趣的 AI 个人网站与独立创作者作品 - wow.01mvp.com

代价:烧掉了一个 ChatGPT Pro 20x 版本(200 美元/月)的所有额度。

核心流程

1. 选择代码模板(最重要)

不要让 AI 从零搭建。基于成熟模板改造,效率高得多。

推荐模板:

怎么选模板?

先和 Codex 讨论需求:

  • 游戏类型(横版/纵版/物理引擎)
  • 访问方式(手机/电脑/横屏)
  • 是否需要联机

让它推荐技术栈,然后基于推荐找对应模板。

技术栈选错了后面很难改。比如用 React 写物理引擎游戏,性能会很差。

2. 写需求文档

不要直接让 AI 写代码,先输出需求文档:

## 游戏概述
- 类型:横版动作游戏
- 平台:手机横屏 + 电脑网页
- 风格:卡通可爱

## 核心玩法
- 主角可以跳跃、攻击
- 敌人会巡逻和反击
- 有分数系统和关卡

## 技术要求
- 使用 Phaser 3
- 支持触摸和键盘操作
- 部署到 Cloudflare Pages

和 Codex 讨论完善后,再让它开始写代码。

3. 确定游戏风格和素材

关键术语:

  • Sprite Sheet:游戏素材,包含角色动画帧
  • Character Sheet:角色的多角度视图(正面/侧面/背面)

让 Codex 生成素材:

请使用 Image Generation 工具生成以下素材:
1. 游戏背景图(横版场景)
2. 主角的 Sprite Sheet(包含:站立、跑步、跳跃、攻击动作)
3. 敌人的 Sprite Sheet
4. 攻击特效和道具图标

必须用 ChatGPT Plus/Pro 会员登录 Codex,中转 API 不支持图像生成。

4. 迭代开发

让 AI 自己测试:

请使用 Playwright 进行自动化测试:
1. 测试角色移动和跳跃
2. 测试攻击判定
3. 测试碰撞检测
4. 截图记录问题

AI 会边测试边修 Bug。

上下文过长时的技巧:

如果一个对话已经跑了几个小时,遇到改不了的 Bug,新开一个对话窗口,把问题描述清楚,往往直接解决。

5. 部署上线

用 Cloudflare 一键部署:

  1. 配置 Cloudflare API Token(需要 DNS、Pages、Workers 权限)
  2. 安装 Cloudflare 相关 Skill
  3. 告诉 Codex:
请将游戏部署到 Cloudflare Pages,域名为 game.01mvp.com
需要自动配置 DNS 解析

详细配置教程:Cloudflare 部署视频

进阶:联机游戏

技术栈:

  • Cloudflare Durable Objects(状态同步)
  • WebSocket(实时通信)
  • Cloudflare KV(数据存储)

开发建议:

  1. 先做单机版,跑通核心玩法
  2. 再加联机功能,降低复杂度
  3. 用 Cloudflare Workers 处理联机逻辑

示例:桌游联机小游戏合集

实战经验

做对的事

  1. 基于模板改造,不从零搭建
  2. 先写需求文档,确认后再写代码
  3. 让 AI 生成所有素材(背景、角色、特效、音效)
  4. 用自动化测试,让 AI 自己发现问题
  5. 新开对话解决顽固 Bug

避免的坑

  1. 不要用中转 API,无法生成图像
  2. 不要一开始就做联机,先做单机
  3. 不要选错技术栈(如用 React 做物理引擎游戏)
  4. 不要在一个超长对话里死磕 Bug

关键提示词

1. 使用 Image Generation 工具生成游戏素材
2. 使用 Playwright 进行自动化测试
3. 部署到 Cloudflare Pages,域名为 xxx.01mvp.com
4. 支持手机触摸和电脑键盘操作
5. 生成 Sprite Sheet 时,每个动作至少 4 帧

时间成本

  • 单个游戏:2-3 小时(即使 1.5 倍速也需要耐心等待)
  • 5 个游戏:一个周末
  • 费用:ChatGPT Pro 20x 额度全部用完

演示视频

下一步

  • 安装游戏开发相关的 Skill(素材生成、音效处理)
  • 学习 Cloudflare Durable Objects 做联机游戏
  • 尝试更复杂的物理引擎游戏(如弹弹堂)

需要懂一些游戏术语(Sprite Sheet、碰撞检测、物理引擎),但边做边学就够了。