Tony Dinh 分享用 AI 开发网页游戏 Survive 10 Waves 的完整过程

大家好！我是 Tony 👋

我一直非常敬佩所有独立游戏开发者。成为独立开发者已经很难了，独立游戏开发者更是难上加难。你不仅需要出色的编程能力，还必须具备美术、设计、音乐、叙事和玩法创意。

我一直想做小游戏，但我没有任何必要的美术技能（即使在编程方面，游戏开发领域仍有许多专门的技术知识需要我花很长时间去学习）。

而现在有了 AI，这些似乎都不再重要了，至少对于我想做的小游戏来说是这样。

我想做一个有趣的东西，让人们可以玩上大约一个小时，享受一段精彩、愉快的时光。所以在过去的几周里，我终于开始动手制作了。

我做的这款游戏叫《Survive 10 Waves》，现在可以在 www.survive10waves.com 免费游玩

制作它让我乐在其中！

在这篇文章中，我将分享制作这款游戏的进展。

音乐

令人惊讶的是，启发我开始制作这款游戏的第一件事是它的配乐。

我偶然听到了一段令人难以置信的配乐，来自 Marc 用 vibe coding 做的游戏（“低沉、缓慢、持续音、工业风、黑暗氛围”），后来我才知道这是他用 Suno 生成的。我很喜欢这种音乐，而且我都不知道 Suno 能生成这么高质量的作品！

我把提示词按自己的喜好稍微调整了一下，又生成了几首，这样我就可以在客厅的音箱里大声播放了。这是我最早生成的曲目之一。

提示词：

氛围，背景音乐。工业风慢热摇滚配乐，带有拖沓的半拍律动、低音调的持续音、金属撞击声和远处的低频轰鸣；类似主歌的段落保持稀疏，伴有工业嗡鸣和破裂的音箱质感，随后扩展为更重的音浪和幽灵般的混响尾音；闪烁的机器滴答声、反向音浪和气压上升音连接每个乐句；黑暗、广阔、电影感的混音，带有深邃的地下底层和冰冷宽广的立体声空间，主题，工业，摇滚，配乐，黑暗氛围，持续音，低沉，缓慢。

整个游戏后来都是围绕这首配乐的氛围和主题构建的。

3D 模型

我开始探索我认为最难的部分：3D 模型动画。

令人惊讶的是，如今的 AI 能够极其出色地生成精确、高质量的 3D 模型。我先用 GPT Image 2 生成角色的 2D 图像，然后用 Meshy.ai 将其转换为 3D 模型。

我用同样的流程生成了应用中所有的静态 3D 资源。

AI 唯一无法帮助我的问题是自动绑定和动画，也就是为 3D 模型添加骨骼和关节，让它们动起来。

大多数工具都能让我相当轻松地为人类形状的角色绑定骨骼，但对于长着 6 条腿和獠牙的怪异外星生物，效果就没那么好了。

最终，我采用了程序化动画，即用代码控制模型的骨骼位置，以编程方式创建手部/腿部的动作。

主角是最耗时的，因为我想在游戏中使用移动系统。我希望角色能够在一个方向上瞄准枪的同时向另一个方向移动。专业游戏开发者知道这叫“平移（strafing）”，但这是我第一次了解这些概念。

哦，还有，万一我还没说明白的话，我没有编写或阅读任何代码。

我在 3D 模型设计甚至 2D 美术方面也毫无技能。一切都是 AI 生成的。

我只是告诉 Claude Code“像这样、像那样做”，直到我对结果满意为止。有时 AI 会遇到困难，我让它构建一个调试工具，好让我用我的肉眼来测试并帮助它调试问题。

我所有的工作都是在 MacBook Air 上完成的。大多数时候，AI 可以使用无头浏览器毫无问题地进行构建和测试。我用的是 Claude Code，但我确信任何其他 AI 工具都能做到同样的事。

游戏玩法

我对想要制作的游戏有非常明确的想法：一个波次清怪、波次之间有升级的闯关游戏。设定良好的进度曲线相对容易，而且可以在合理的范围内完成。

我还希望游戏具备基于技巧、高每分钟操作数（APM）的操控，屏幕上要有大量的视觉效果和音效。对我来说，这就是一款好游戏的全部。

关于游戏的主题，我特别喜欢经典游戏 Alien Shooter 中击杀外星虫子的快感。我喜欢游戏 Factorio 中外星人的攻击方式，也喜欢游戏 Control 中的枪械射击系统，以及 Helldivers 中的游戏循环机制。

所以我想把它们都融入到一个游戏中，并以一种合理的方式将它们融合在一起。我觉得那会非常有趣（至少对我来说是这样！）

我最终确定的玩法是一款俯视角 3D 射击游戏，你必须在一波又一波试图攻击你的外星生物中生存下来，而且每次你清完一波，都会有升级可供选择。

我从其他一些游戏中学到了敌人攻击的方式，即提前对攻击区域给出一些警告，这样游戏就变成了一点点依靠角色移动的“躲避游戏”，以及一点点依靠枪械和升级的射击游戏。

是什么让游戏手感好

我在游戏设计方面毫无经验，所以我只能依靠自己玩游戏的经验来让游戏变得有趣。

对我来说，我喜欢视觉效果、音效、音乐和基于技巧的元素所带来的感觉，而且它们都必须通过平衡的进度曲线循序渐进地呈现。

游戏的进度曲线至关重要。如果在游戏过程中的任何时刻，游戏变得太简单、太困难或太重复，它就会变得无聊。

所以我尝试整理波次、敌人数量、可用于升级的模块、每把枪在每个等级的伤害等，并且我进行了大量的试玩。

我的目标是每波大约 1-3 分钟，无论玩家已经玩了 5 分钟还是 50 分钟；波次的设计将纯粹基于进度规模和玩家的自然升级（而不是依靠倒计时之类的任意手段）在 1-3 分钟内结束。

为了实现 1-3 分钟的完成时间，在这个过程中我请 AI 帮了我很多忙，比如估算每把枪的每秒伤害量、每种敌人的生命值（HP）、在给定波次预期收集的金币数量、预期的模块数量和每个模块的等级、虫子的数量等等。

处理所有这些数字，然后试玩波次看看是否匹配，这相当有趣。

游戏平衡仍然不完美，但我学到了很多，而且我认为已经足够好了。

与 AI 合作

Claude Code（或者如今任何其他 AI 模型，我认为）现在非常强大，我只需提出游戏中想要的任何东西，它就会构建出来。

我唯一要做的工作就是思考我想要游戏里有什么、想要它是什么样，做 QA，以及偶尔和 AI 一起做一点调试。

所以我把大部分时间都花在按照自己的偏好搭建一套好的枪械、模块、敌人、攻击模式、移动模式等。我显然也可以让 AI 替我想出这些，但那样有什么乐趣呢？我希望敌人是特定的东西，以特定的方式移动，并以特定的模式攻击。

我主要借鉴了过去玩过的其他游戏的灵感，但自己也发明了一些古怪的敌人。而我想出来的所有东西，AI 都能为我构建出来。障碍物、视觉效果、敌人的寻路、动画……一切。

我给了 AI 一个 ElevenLabs API 密钥来生成音效（你在游戏中听到的所有声音都是由 ElevenLabs 生成的）。我给了它一个 OpenAI API 密钥来生成纹理图像，以及一个 Meshy API 密钥来创建静态 3D 模型。

局限性

尽管 LLM 非常强大，我在代码库方面还是遇到了一些问题，最终不得不亲自介入并制定规则，以免它把事情搞砸。

我遇到的最早的问题之一是 AI 把所有东西都放在一个巨大的文件里。你可能会认为它们此时已经具备了出色的软件工程技能，所以当我看到主文件现在有 3,000 多行时，我很惊讶。

我以一个 HTML 文件开始这个项目，从未检查或讨论过任何关于代码质量的事情，所以随着时间的推移，AI 只是一直往里添加东西，而不考虑重构或重组项目。我见过很长的文件，也见过超过 20 个文件平铺在一个文件夹里，完全没有尝试建立基本的文件夹结构来组织这些文件。

我之所以注意到这一点，是因为有一次文件变得太大了，我的 Claude Code 开始写一个 Python 脚本来编辑文件，而不是直接编辑文件，然后每次它需要编辑或编写新代码时，它都必须 先编写 Python 脚本，然后才能编写实际的游戏代码。

这非常慢，而且浪费了大量的 token。这促使我去查看发生了什么，就这样我发现了这个问题。

我遇到的另一个问题是 Claude Code 在代码中添加了大量注释，以至于我认为注释的数量几乎是代码数量的两倍。

当我仔细检查这些时，我可以看到注释是在“叙述”函数/文件或代码片段的历史。

就好像每次我对游戏中的某件事改变主意时，它都会把这一点记录在代码注释里，即使旧行为已经不再重要了。

所以因为这些问题，我最终不得不创建一个 CLAUDE.md 文件并设定一些规则。总的来说，整个与 AI 一起构建的体验还是相当好的。

我的整个 CLAUDE.md 文件：

- Do not write comments. Code should be self-explanatory: name things for what they are and keep functions small enough that prose is not needed.
- Comments are for exceptions only — a constraint the code cannot express. When one is truly needed, write a short sentence, never a paragraph. Comments go out of date; code does not.
- Keep the code base in good shape. Max 500 lines per file.
- Organise `src/` into folders by area. A flat directory of dozens of files is not a structure.
- Testing: you can load a browser to verify the game load properly, but never try to do an end-to-end testing with screenshots (you are very unreliable with visual testing). Don't try to take screenshots of the game, no need to mention in your response that you skipped testing.
- If you need to generate new sound effects, use ElevenLabs API.
- If you need to generate new texture, use OpenAI GPT-Image-2 API.
- If you need to generate new static 3D models (no animation), use the Meshy API.
- Relevants API keys are available in .env (or via Cloud Agents Runtime Secret)
- Check the `tools/` folder to see what tools you have access to.
- Never use audio blips for sound effects, always use real sounds effect generated by ElevenLabs APIs.

每隔几天，我会把项目加载到 Cursor 中，让云端代理审查代码库，“/loop 重构直到你满意”，然后让它整夜运行。第二天早上，我醒来后测试一轮游戏，确保没有东西被破坏，然后继续构建。

特殊的波次

当我在我的 Twitter/X 上分享游戏的早期版本时，一些人评论说音乐非常棒（我完全同意！）。它真的营造了游戏的氛围。它让我想起了我在游戏音乐方面经历过的最好的体验之一。

在 Remedy Entertainment 开发的游戏《Control》中的 Ashtray Maze 关卡里，开发者将一首非常棒的歌曲与玩家的游戏进度结合在一起，让这首歌在每个场景中都“跟随”着你。

这很难用语言描述，但我会试着说说。

这个特殊关卡以一首歌开始；这首歌（和其他任何歌曲一样）有多个段落：低、高、高潮、再次低、变换节奏、再次高潮、尾声等等。同样地，这个特殊关卡也是这样设计的，通过安排敌人和环境来大致匹配歌曲的结构。

而这里的特别之处在于，玩家完全掌控着通关这个关卡的节奏。他们可以在一个段落里待任意长的时间，也可以快速通过各个段落，而歌曲会跟随玩家。

当你遇到 Boss 时，音乐发生变化，但仍然“合情合理”，仍然是同一首歌，这种感觉好得难以言喻；而当你击败 Boss 或进入结尾段落时，歌曲就“自然而然”地结束了。

Remedy 团队真的很懂得如何让玩家感觉自己是主角，而且身处“Control”之中。

这次体验让我印象极其深刻，我也想在自己的游戏中加入类似的东西。我想看看重现这种体验有多难。

于是我开始为一首关于我的游戏（名为《Survive 10 Waves》）的歌曲生成符合主题的歌词，它需要包含创造良好体验所需的所有段落。我用 Suno 生成了这首歌。你可以在这里收听。

然后我让 Claude Code 分析 WAV 文件，并为我创建一个小工具，以便开始制作循环段落。我花了不少时间来选择和微调循环段落以及淡入淡出/混合机制，让每个段落听起来都很棒。

这也是我开始学习一些音乐术语（如 BPM、小节、拍子等）的时候，这很有趣。我制作的工具是专门为我正在处理的这首曲子设计的，但我认为它可以被泛化，适用于任何歌曲。

于是我将这首歌分成了 7 个段落：前奏、热身、战前、第一场战斗、休息、第二场战斗和结尾。每个段落都会有一个循环段落，如果玩家在某个段落上花费更多时间，我就可以一直循环它，而且歌曲在循环时听起来仍然很好（如果玩家正在积极地进行战斗，他们实际上根本不会注意到循环！）

除了循环之外，我还在每个段落中设置了“提前退出点”。这是为了在玩家清除一波敌人比歌曲该段落的长度更快的情况下，我们可以无缝地将歌曲过渡到下一个段落。如果玩家速度非常快，他们可以跳过整个歌曲段落，而且听起来仍然“相对不错”，没有奇怪的剪切。

我发明了一种标记语言，并让 Claude Code 来解析它，这样我就可以轻松地微调循环和退出点。例如，标记“[35-58:blend]”表示从歌曲的第 35 小节循环到第 58 小节，使用“blend”作为混合模式。整首曲子的循环段落看起来是这样的：

--intro--
[1-4:blend]
--warmup--
8:exit:head-blend:500
12:exit
16:exit:head-blend:500
[13-24:blend]
--precombat1--
[25-28:tail-blend:500]
--combat1--
20:exit
[35-58:blend]
--rest--
38:exit:tail-blend:500
42:exit
46:exit
54:exit:head-blend:600
50:exit:head-blend:800
59:entry
[75-86:blend]
--combat2--
82:exit
[98.3-110.2:head-blend:800]
--end--
74:exit
78:exit
102.2:exit:head-blend:800
106.2:exit:head-blend:800

这个结果非常令人满意，至少对我和一些体验过的人来说是这样：

你可以在这个演示中把玩原声带，并查看源代码（或者你也可以直接在游戏中首次体验！）

完成游戏

对我来说，制作游戏是如此令人满足和上瘾，几乎和玩游戏本身一样。但在某个时刻，我希望完成它，宣告它大功告成。

我希望把它变成一件娱乐性的“完成品”，就像一部电影或一部 Netflix 剧集，你可以打开它，享受一段美好时光，然后结束。你以后可能会回来再次体验它，但现在我不想把这个做成一个持续进行的项目。

这款游戏也可以免费游玩，直接在网页上玩，无需安装。但我会尝试把游戏发布到 Steam 和 iOS App Store 上，就当作一项成就。

如果你想玩这款游戏，直接访问这里：www.survive10waves.com （强烈建议戴上耳机，打开游戏音乐！）

如果你玩得很开心，请把你的游戏视频发给我，在 Twitter/X 上标记我，或者分享你的 YouTube 链接！我非常喜欢看人们玩这款游戏。观看的过程真的太有趣了。

就说到这里了！感谢阅读！