Preview整个网站还在搭建中,当前包含较多草稿和未完成内容,暂未正式发布。

用 Codex 做游戏:一个周末做 5 个小游戏的实战经验

从零开始用 Claude Codex 制作网页小游戏的完整流程,包括技术选型、素材生成、自动化测试和一键部署

成果展示

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

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

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

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

核心流程

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

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

推荐模板:

如何选模板?

先和 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 一键部署:

  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 20× 额度全部用完

演示视频

下一步

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

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

目录