用 Codex 做游戏:一个周末做 5 个小游戏的实战经验
从零开始用 Claude Codex 制作网页小游戏的完整流程,包括技术选型、素材生成、自动化测试和一键部署
成果展示
一个周末,用 Codex 从 0 到 1 做了 5 个小游戏和项目:
- 狂扁笨笨 - kuangbian.01mvp.com
- 愤怒的笨笨 - angry-benben.01mvp.com
- 弹弹堂 - dandan.01mvp.com | 演示视频
- 笨笨大冒险 - benben.01mvp.com
- 桌游联机小游戏合集 - game.01mvp.com
顺带还做了一个作品收录站:
- 发现有趣的 AI 个人网站与独立创作者作品 - wow.01mvp.com
代价:烧掉了一个 ChatGPT Pro 20× 版本(200 美元/月)的所有额度。
核心流程
1. 选择代码模板(最重要)
不要让 AI 从零搭建,基于成熟模板改造效率更高。
推荐模板:
- 游戏开发:Phaser + Vite + TypeScript
- Cloudflare 全栈:Vite Flare Starter
- Cloudflare 基础:官方模板库
如何选模板?
先和 Codex 讨论需求:
- 游戏类型(横版/纵版/物理引擎)
- 访问方式(手机/电脑/横屏)
- 是否需要联机
让它推荐技术栈,然后基于推荐找对应模板。
WARNING
技术栈选错了后面很难改。比如用 React 写物理引擎游戏,性能会很差。
2. 写需求文档
不要直接让 AI 写代码,先输出需求文档:
## 游戏概述
- 类型:横版动作游戏
- 平台:手机横屏 + 电脑网页
- 风格:卡通可爱
## 核心玩法
- 主角可以跳跃、攻击
- 敌人会巡逻和反击
- 有分数系统和关卡
## 技术要求
- 使用 Phaser 3
- 支持触摸和键盘操作
- 部署到 Cloudflare Pages和 Codex 讨论完善后,再让它开始写代码。
3. 确定游戏风格和素材
关键术语:
- Sprite Sheet:游戏素材,包含角色动画帧
- Character Sheet:角色的多角度视图(正面/侧面/背面)
让 Codex 生成素材:
请使用 Image Generation 工具生成以下素材:
1. 游戏背景图(横版场景)
2. 主角的 Sprite Sheet(包含:站立、跑步、跳跃、攻击动作)
3. 敌人的 Sprite Sheet
4. 攻击特效和道具图标INFO
必须用 ChatGPT Plus/Pro 会员登录 Codex,中转 API 不支持图像生成。
4. 迭代开发
让 AI 自己测试:
请使用 Playwright 进行自动化测试:
1. 测试角色移动和跳跃
2. 测试攻击判定
3. 测试碰撞检测
4. 截图记录问题AI 会边测试边修复 Bug。
上下文过长时的技巧:
如果一个对话已经跑了几个小时,遇到改不了的 Bug,新开一个对话窗口,把问题描述清楚,往往能直接解决。
5. 部署上线
使用 Cloudflare 一键部署:
- 配置 Cloudflare API Token(需要 DNS、Pages、Workers 权限)
- 安装 Cloudflare 相关 Skill
- 告诉 Codex:
请将游戏部署到 Cloudflare Pages,域名为 game.01mvp.com
需要自动配置 DNS 解析详细配置教程:Cloudflare 部署视频
进阶:联机游戏
技术栈:
- Cloudflare Durable Objects(状态同步)
- WebSocket(实时通信)
- Cloudflare KV(数据存储)
开发建议:
- 先做单机版,跑通核心玩法
- 再加联机功能,降低复杂度
- 使用 Cloudflare Workers 处理联机逻辑
示例:桌游联机小游戏合集
实战经验总结
✅ 做对的事
- 基于模板改造,不从零搭建
- 先写需求文档,确认后再写代码
- 让 AI 生成所有素材(背景、角色、特效、音效)
- 使用自动化测试,让 AI 自己发现问题
- 新开对话解决顽固 Bug
❌ 避免的坑
- 不要用中转 API,无法生成图像
- 不要一开始就做联机,先做单机
- 不要选错技术栈(如用 React 做物理引擎游戏)
- 不要在一个超长对话里死磕 Bug
🎯 关键提示词
1. 使用 Image Generation 工具生成游戏素材
2. 使用 Playwright 进行自动化测试
3. 部署到 Cloudflare Pages,域名为 xxx.01mvp.com
4. 支持手机触摸和电脑键盘操作
5. 生成 Sprite Sheet 时,每个动作至少 4 帧时间成本
- 单个游戏:2-3 小时(即使 1.5 倍速也需要耐心等待)
- 5 个游戏:一个周末
- 费用:ChatGPT Pro 20× 额度全部用完
演示视频
下一步
- 安装游戏开发相关的 Skill(素材生成、音效处理)
- 学习 Cloudflare Durable Objects 做联机游戏
- 尝试更复杂的物理引擎游戏(如弹弹堂)
INFO
需要懂一些游戏术语(Sprite Sheet、碰撞检测、物理引擎),但边做边学就够了。