返回 文章 build CMS 文章

Battle Drones:用氛围编程打造的音频联机 RTS 游戏

一个几乎不写代码的开发者,靠提示词和 AI 代理迭代出可玩的 3D 即时战略游戏。

氛围编程AI 代理RTS 游戏Claude Code
成长分 / 100 71 综合收获、行动、留存与影响

Battle Drones:用氛围编程打造的音频联机 RTS 游戏
为什么值得读展示氛围编程(vibe coding)在复杂游戏项目中的真实能力边界与迭代方法

提供从 MVP 到 3D、多人联机的完整版本演进路径和关键提示词

关键洞察
  1. 项目由 Claude Code 等编码代理完成 321 次提交,作者几乎未审查代码,但进行了大量试玩测试
  2. v4“让它好玩得多”的提示触发 Ultracode 动态工作流,运行超千次模拟试玩并重新平衡数值
  3. v5 将游戏移植到 three.js,所有 3D 模型由 Claude 用 TypeScript 代码构建
转成行动

深入阅读

正文与原文对照

原文保真覆盖:全文原文字符:28644

我最新的 vibe coding 游戏实验是一款《命令与征服》风格的 RTS(即时战略)游戏,名为 Battle Drones(点此游玩)。与我之前的实验不同,这一款确实好玩。我有点不好意思承认,我是靠告诉 Claude“让它好玩得多(Make it a LOT more fun)”才做到这一点的。它还支持附近设备之间通过音频同步游戏状态进行多人对战!以下是我目前构建的内容,以及过程中学到的一些东西。

Battle Drones

我最初的目标是构建一款能在手机上玩的 RTS 游戏,风格类似《命令与征服》。我对 1995 年的原版有着美好的回忆(我也喜欢《红色警戒》),想重新找回一点那种魔力。

经过 12 次重大迭代(以及编码智能体——主要是 Claude Code——提交的 321 次提交),我现在有了一款可在移动端和桌面端运行的浏览器游戏,它有多种游玩模式、若干地图(包括随机地图生成器),甚至支持两台设备在彼此麦克风范围内进行多人对战。(更新:也支持在线多人对战;音频多人对战曾引发头痛问题!)

以下是 Battle Drones 在桌面浏览器中运行的视频演示:

▶ https://static.simonwillison.net/static/2026/archipelago_720p_h264.mp4

目前的功能包括:

  • 9 种建筑、7 种地面载具、6 种空中载具、3 种步兵单位——全部为 3D 模型,你可以在此浏览
  • 战争迷雾
  • 需要不同的武器来攻击空中或地面载具
  • 六张地图,横跨五种生物群系——温带、沙漠、极地、火山、热带
  • 随机地图生成器
  • 遭遇战模式——在旋转对称地图上进行红蓝对抗
  • 背水一战模式——一名玩家尽可能多地抵挡一波波敌人
  • 范围效果武器:弹幕、EMP、空投舱、天锤
  • 补给箱空投,附带额外资源
  • 响应事件的游戏内音乐——战斗爆发时会变得更加激烈
  • 不同的游戏内 AI 性格(均衡、快攻、空中蜂群、 boom、天空力量、铁甲)
  • AI 对 AI 模式,可以观看这些性格互相对战
  • Goliath——一台巨大的践踏机甲,拥有激光眼和臂炮,并能建立新基地
  • 变异器,可添加额外规则或变化
  • “每日行动”挑战
  • 等级与成就(奖章)
  • 智能体对智能体模式,两个 LLM 可以互相对战 Battle Drones
  • 基于两台邻近手机通过音频消息通信的多人模式,是我早先 Chirp Pong 实验的延伸
我是如何构建它的

Battle Drones 高度依赖 vibe coding——我几乎没审阅过代码,而且它是用一种我自己很少使用的语言(TypeScript)构建的。不过我进行了相当多的试玩,而且自项目开始以来它经历了大量迭代。

以下是项目到目前为止的大致历程,包括关键提示词和对话记录链接。

v1:初始原型

我早在七月就从 Claude Fable 5 开始:

We are going to build a mobile friendly RTS game - command and conquer style - called Battle Drones, in which two armies of drones (both flying and ground-based) battle for territory and resources

Let's start with a MVP design, ask me some questions

这里有一份共享对话记录。我给 Claude Code for Web 提供了一个带有 OpenAI API 密钥的环境变量,并告诉它使用 OpenAI 图像生成 API 来生成素材,这让我得到了一些基本的精灵图。

你可以在此试用 v1——它看起来是这样的:

游戏画面。右侧是用于建造 Fab、Airpad、Turret、Harv、Sting、Flak、Scout、Wasp、Raptor 的文字图标。2D 战场上有一块块状的战争迷雾。有一些宝石,一座 HQ 建筑正被渲染粗糙的坦克攻击,周围散布着一些蓝色载具。视觉上并不惊艳,但确实看起来像一款基础 RTS。

它可被识别为一款 RTS,具有建造机制、选择和指挥单位的能力,以及一个可供对战的基础 AI。

这第一个版本勉强算是个概念验证,玩起来一点也不好玩。

Claude 在这些早期版本中使用了 Phaser 2D 游戏框架。我直到好几次迭代之后才意识到这一点!

v2:完整精灵图

第二个版本(在此试用 v2)为所有载具添加了精灵图,并加入了“AI 对 AI”模式,这样我就能观看游戏自行运行,而无需自己直接操控。

Claude 在提示 OpenAI 图像模型生成精灵图方面表现得相当称职。你可以在 public/assets/sprites 文件夹中浏览 v2 的精灵图。

v3:多样地形

它仍然不怎么好玩,画面也很无聊。此时已是十月,我已升级到 Claude Opus 5.5。我告诉它:

Massively improve this game. Make the graphics and gameplay better (keep it mobile friendly). Render new graphics using the latest OpenAI GPT image API (lookup details) with the API key in the environment variable. Add new unit types and balance the gameplay better. Also add new buildings and better, more varied terrain.

这带来了五张新地图,配有多种风格的生成背景图块,可在此查看。Opus 还重新生成了精灵图,使其在视觉上更具吸引力。你可以在此试用 v3——它看起来是这样的:

地图现在是一张冰雪地图,有雪、冰和破碎的冰面——看起来真的很棒。载具和建筑也都进行了外观升级。这开始看起来像一款真正的游戏了。

这开始感觉像一款真正的游戏了!不过玩起来仍然不怎么好玩——我发现自己很快就感到无聊。

v4:趣味更新

到目前为止,我的 Battle Drones 实验印证了我先前的看法:编码智能体可以构建出看起来像游戏的东西,但实际上无法做出真正引人入胜、值得一玩的作品。

我在晚餐时和某人分享了这个理论,然后心想,我应该给这些模型一个真正的机会来证明我错了。我在手机上向 Opus 5.5 发出了提示:

This game isn't fun enough yet. Make it a LOT more fun.

这次我运行在Ultracode 模式下,在该模式下 Claude Code(此处为 Claude Code for Web)会运行“动态工作流”,其文档中的描述是:

动态工作流是一个 JavaScript 脚本,可同时编排多个子智能体。

这开启了长达数小时的工作。我在晚上启动它,直到第二天上午晚些时候才得到可玩的结果。但结果非常惊艳。

你可以在这里试用 v4——它看起来是这样的:

熔岩地图。上行链路卫星正在被占领,水晶看起来更好了,单位上方显示 Elite 文字,有一个标着 Fight 的箭头可跳转到战斗,AI 对 AI 模式带有速度控制器——这里有许多新功能。

我让 Claude 自己撰写了发布说明——以下是其中的亮点:

现在每场遭遇战和每日行动(Daily Op)开局时都会提供一次选择,给落后的一方翻盘的机会,并把双方军队拉向地图中央。此外还有两种新的游玩方式。

  • 开局选择:在计时开始前选择 Blitz、Industry 或 Air Wing。
  • 呼叫打击能力:Barrage、EMP、Drop Pod 以及 Sky Hammer 轨道打击。
  • 目标与回收:上行链路中继站、补给空投以及可拆解为废料的残骸。
  • 手感:战斗打击感、自适应音乐、单位语音和播报员。
  • 指挥:战斗警报、游戏速度、已保存小队和触屏放置。
  • 新模式:Last Stand 生存波次和一个 8 关的 Ops 战役。
  • 进度系统:英雄、带奖励的战后报告、职业生涯、7 个变异器和每日行动。

战斗持续时间更长,局势波动也更大。在 Normal 难度下的 1,200 场 AI 对 AI 测试对局中,25 分钟后仍未分出胜负的对局比例从 14% 降至 0.9%。曾落后 800+ 废料的一方获胜的比例从 24% 升至 46%。

Claude 耗时如此之久的部分原因是,它运行了一千多次模拟试玩会话,并利用这些结果重新平衡现有单位、添加新单位并引入新功能。

v5:Battle Drones 进入 3D

在 Ultracode 于“让它有趣得多”这一目标上取得成功后,我决定把目标定得更高:

Port this game to three.js with 3D models for all of the buildings and vehicles and landscapes

这又是一次通宵运行。我醒来时看到了这个 v5 版本:

现在它变成了 3D——战场呈轻微倾斜视角,建筑和载具都是 3D 模型,岩石和树木看起来也有点 3D 了。

新的 3D 模型完全由 Claude 用 TypeScript 代码构建。

v6(在这里游玩 v6)增加了一些视觉打磨。v7(游玩 v7)加入了机器人步兵(士兵、火箭小队、狙击手)以及一架名为“Condor”的运兵飞机。

v8:Archipelago

我开始感到愧疚,因为我对游戏的实际设计投入实在太少——过去几个版本确实只是我在说“让它更有趣”和“增加视觉打磨”。

我注意到 AI 并不常使用 v7 新增的步兵和运兵飞机——使用它们并没有很好的战略理由。

如果我们有一张新地图,并配上一套新的游戏机制,主动鼓励玩家用步兵机器人装满 Condor 并派往地图各处,那就太好了。

这促成了我迄今为止最长的一段提示:

Design a new map. Goal is to make different strategic incentives that encourage use of Infantry and Condors and aerial vehicles.

To do this the map will have limited harvester resources but several more uplinks - but uplinks will be on islands that are inaccessible by land vehicles or infantry. These uplinks can also not be claimed using air vehicles. The ONLY way to get them is to fly infantry there in a Condor.

Armies always start with a Condor and a single squad. If an army has no Condor a new one will be provided for free, flying in from the edge closest to their HQ and landing there. That free condor will come with a single free squad on board.

The two HQs should be entirely separated by water, but still accessible by vehicles thanks to two bridges across the map in different places

I want to encourage a battle over uplinks.

The map should be the times the size of other maps - still square

First research and then critique this design. Only build after we have agreed on any modifications

You get to design a new biome for this

结果就是热带风格的Archipelago地图,上面有七个岛屿上行链路,玩家只能通过用 Condor 空运步兵才能占领它们。一旦你掌握了较简单地图上的基本游戏机制,这绝对是最好玩的一张地图。v9 版本让这张地图更有趣了一些——它现在看起来是这样的:

三座岛屿,每座都有一个上行链路卫星。蓝方占据一个,红方占据另一个,一架蓝色 Condor 正飞向红方岛屿,该岛由一架红色飞机守卫。附近有一座桥。主题是热带岛屿,看起来非常宜人。

v10:Goliath 与智能体对战

我决定在游戏中加入巨型机器人机甲——可以想想《环太平洋》中的 Jaegers,或者 Warhammer 40,000 中的 Titans。

以下是我用来与 Claude 进行头脑风暴的一些提示:

Help me brainstorm ideas for adding giant robots to this game - think dreadnoughts or titans from W20K - how could we do this in a way that enhanced gameplay, kept things balanced, added unique twist? Don't overthink this yet

Let's keep brainstorming. I like the idea that it's a mobile base - that can accept harvested scrap and can have buildings built near it (even if it later moves on) and can produce infantry units too. An interaction with condor would be neat but I don't know what that could be.

Idea: as it gets damage it loses the ability to fire some weapons - by default it has eye laser (like lancers) and arm canons (like titan) and two shoulder mounted mortars, plus machine guns similar to a squad of troops

Damage knocks out mortars and then laser - it always has guns. You can't build next to a building that was only put there because of the mech, you need the mech there for off-base building and only within three squares of it

[...] Lets do two condors can carry the mech

最终结果真的非常酷。

▶ https://static.simonwillison.net/static/2026/goliath.mp4

Goliath 可以通过 Gantry 建造——这是一种只有在先建造了 Fab、Bay、Airpad 和 Tech Lab 之后才能建造的建筑。你可以看到 Goliath 正在建造中,随后它会从 Gantry 中走出,并在地图上行进。

Goliath 可以“锚定”,将自己固定在地面上。在锚定状态下,它们可以充当新的 HQ,在新区域建造步兵单位和额外建筑。

两架 Condor 飞机可以钩住一架 Goliath,此时它就能被空运到地图各处!

现在,只有当摧毁敌方的 HQ 建筑以及他们可能建造的所有 Goliath 后,游戏才会结束。

还有几个与 Goliath 相关的变异器:

  • Goliath Armada 让双方开局各拥有四架空中 Goliath(每架配一对 Condor),且没有其他单位。
  • Robot Love 增加了一条特殊规则:如果敌方的 Goliath 在战场上彼此靠近,它们就会相爱,游戏以平局结束。(这条要感谢 Natalie)。
智能体对战

v10 的另一个功能是智能体对战。在思考多人模式可以如何运作时,我有了一个想法:如果不同的 LLM 能在游戏中一决高下会怎样?

Fun extra challenge: think about how we might make multiplayer available to coding agents. It would be neat if we could set up a battle between eg GPT-6 Sol and Claude Opus 5.5 where each model has access to a tool which gives them information about the game (presumably non-visual, but only the information they could see through fog of war etc) and lets them control their units etc [...]

Consult ~/dev/llm/docs and include notes in that file about how LLM could be used here via a new tools plugin

Opus 5.5 着手处理此事,产出了这份 AGENT-BATTLES.md 提案,随后实现并测试了它。该功能还包括录制和回放这些对战的能力——这里是Claude Haiku 5.5 对战 GPT-6 Luna 的回放,同一场对战在另一个调试工具中的呈现,该工具会显示底层的提示响应。

两个 AI 模型进行即时战略游戏的回放截图,采用俯视视角,展示一张雪地地图:左侧是布满碎裂浮冰的深色冰封湖面,上方和右下方是松树林。顶栏:暂停按钮、“6:27”、“1×”、蓝色的“anthropic/claude-haiku-5-5 · industry”、红色的“gpt-6-luna · industry”、标有“B”和“R”的蓝红强度条,以及“0:03”。左侧通知:“Blue: Pushing turrets at the enemy's south-east edge.”。回放面板:“Blue anthropic/claude-haiku-5-5 · industry vs Red gpt-6-luna · industry · frostbite seed 42”、位于“6:27 / 7:48”的时间轴滑块,以及按钮“−30s”、“+30s”、“All”、“Blue's eyes”、“Red's eyes”、“Notes”。场景中,中下方冰面边缘附近有一群蓝色坦克和一台拖着烟雾的大型蓝色 Goliath 机甲正在推进,其北侧沿冰面排列着一列红色炮塔(其中一座正在燃烧),东侧岩石山脊旁停着红色坦克和卡车,右上方是红色基地建筑。右上角有小地图,左下方有放大、缩小和闪电按钮。

驱动智能体对战的提示词可以在这里看到。

README 中链接了更多类似这样的回放。我希望将来某个时候能把它做成一张完整的联赛积分表。

v11:随机地图

这个版本之所以存在,纯粹是因为有一天我瞥了一眼自己的Claude Usage页面,发现每周额度只用了 75%,而它将在 45 分钟后重置。我决定看看能否用剩余的 token 再给 Battle Drones 增加一个功能,于是选定了“随机地图”作为目标:

Design and implement a mechanism for generating a random map using any of the available biomes - it should be the size of the largest map and rivers and bridges and rocks and forest and scrap and crystals are all in play. Make them rotationally symmetric and use a seed to allow them to be selected or reused later. You have 45 minutes to build this! Be creative.

这里是对话记录,以及 Claude 生成的一张用来向我展示其工作成果的图片:

十张俯视游戏地图组成的网格,每个生物群系两张(温带、沙漠、极地、火山、热带),每张都有河流或熔岩流、桥梁和道路。标题:“Battle Drones: generated maps (108x108, point-symmetric), 2 per biome, runtime ground painter”。每张地图都标注了名称和布局类型,以及种子和渡口数量,例如“Hawthorn Delta · fork”“random-temperate-1x8a6r2 · 6 bridges, 4 fords”;布局类型包括 fork、badlands、crossing 和 lake。

v12:通过声音实现多人模式

我刚刚才让它跑通,所以还没多少时间主动测试它。最新的 Battle Drones 现在支持两台设备在彼此麦克风可及的距离内进行多人对战!

这个功能最初源于我上周的Chirp Pong实验。我把 Claude Code 指向那个可用的概念验证:

Clone Simonw/tools from GitHub and look at recent branches for the example pong game that uses web microphone to implement multiplayer between two phones via audio signals

Build a version of that for battledrones

Opus 构建了这个 Radio Probe 工具,用来测量两台设备之间能获得多少带宽,并基于其积极结果,实现了一套完整的音频调制解调器系统。到目前为止,我已经在笔记本电脑、iPhone 和 iPad 之间试过它,似乎运行得非常好!

为什么用声音来实现这个?因为我喜欢静态 HTML,它运行起来零成本,而我不想在某处启动一台服务器,然后只要有人可能想玩这个游戏,就得一直负责维护它运行。

一些想法

我对游戏开发几乎一无所知。这使它成为一个绝佳机会,可以在我现有软件工程经验对结果影响较小的领域里试用编码智能体。

游戏也是风险极低的。最坏的情况也不过是我某个愚蠢的游戏实验出了个 bug。

今天早上(通过 Hacker News)我发现了《Steam 用户恳求推出无 AI 过滤器,因为 Steam Next Fest 充斥着粗制滥造之作》。我个人做梦也不会把 Battle Drones 提交到这样的活动中——它仍然太粗制滥造,不足以被视为一个正当的独立游戏项目。

……但我现在能看到一条让这类 vibe coded 游戏被认真对待的道路。Battle Drones 很有趣,看起来不错,还有创新功能(据我所知,通过音频实现多人模式在 RTS 中尚属首次)。

我很想看看一个比我更有品味、并且有强烈热情去做出真正卓越作品的人能构建出什么!

这个项目还有一些其他观察:

  • 静态 HTML 和 JavaScript 是游戏开发的绝佳媒介。WebGL 运行良好,而Three.js(以及之前的Phaser)是极好的构建平台,当前的模型对它们了如指掌。
  • 这也让它们能作为渐进式 Web 应用运行——我并没有要求这一点,但 Battle Drones 可以离线工作。我能在飞机上玩它,尽管从未直接安装过它——我的手机缓存了它。
  • 给 Claude 一个 OpenAI API 密钥,并告诉它使用 OpenAI 的模型生成图像,效果非常好。它能查看自己生成的图像,并迭代提示词。
  • Opus 5.5 在使用 Three.js(以及 Blender,无疑还有其他 3D 应用程序)进行 3D 建模方面表现出色。GPT-6 Astra 也同样如此。它们完全有能力为 3D 游戏项目构建模型。
  • 对于回放和多人模式这类功能,拥有一个确定性模拟引擎很有用。有一次,Claude 不得不把对Math.sin()和Math.cos()等的调用替换为自定义版本,因为不同的浏览器(例如 Chrome 与 Safari)返回的数字略有不同,导致回放失去同步。
  • Opus 5.5 能写音乐!这个项目里没有音频文件——配乐完全通过代码生成,在不同地图上有所变化,甚至会随着战斗升温而变得更加激烈。参见Scrimshaw Jukebox,那是之前用 Claude 进行音乐创作的一次实验。
  • 我仍然无法释怀“Make it a LOT more fun”这个提示词效果有多好。
  • 工具实际上是免费的。我通过提示词做出了Radio Probe、Model browser、Agent vs. Agent 调试工具,而 Claude Code 为自己构建了一堆工具,我自己甚至都还没探索过。
  • 静态 HTML 游戏之间基于音频的多人对战可行!我希望看到更多游戏采用同样的模式——今天四处查证时,除了 Alon Horesh 的 Siner 和 Georgi Gerganov(也是 llama.cpp 的作者)的 ggwave 之外,我没找到多少先例。
  • Claude Code 的“Ultracode”烧起 token 来毫不吝惜,但它也能仅凭一个提示词解决复杂问题(比如加入基于音频的多人对战)。
  • 我仍然无法完全摆脱以这种方式构建软件的愧疚感。在一个我几乎没有相关经验的领域里,我觉得自己并没有资格做出这么好的东西!到现在我已经私下给足够多的人看过它,以至于不把它发布出来供所有人查看和学习,反而让我觉得不对劲。
更新:在线多人对战支持

在本文前面我说过:

游戏的风险也极低。最坏的情况也不过是我的某个愚蠢游戏实验出了个 bug。

然后我和 Natalie 试玩了多人对战版本……结果那尖锐的调制解调器音效让她头痛得厉害!

这算是个相当严重的 bug。我加了一条警告,随后受到启发,决定构建真正的网络多人对战。我尝试让 WebRTC 跑起来,但即使在我自己的 WiFi 网络上,也无法在我自己的两台设备之间建立连接,于是我让 Claude 构建了一个简单的无状态 WebSockets 中继服务器:

If I wanted to support multiplayer between two devices at a very low cost without storing any state on the server could I do that with a tiny asyncio web server running on the cheapest Fly instance?

Build the server and the fly.toml for deploying it, use Fly application name battledrones-relay - put that in a folder in the repo, include deploy instructions in the README in that folder

这是最终的服务器。由于它可以缩容到零,并且运行在单个 Fly.io shared-cpu-1x 实例上,我的花费应该不超过每月 2.19 美元——而且这还是假设它一直保持热状态并全程处理连接的情况。

Battle Drones 现在支持在线多人对战。点击“Duel a friend online”,然后通过你常用的消息应用分享生成的房间 URL,或者让对方拍下显示的二维码。

我还加了一个功能:比赛结束后,你可以复制比赛的 JSON,然后把它输入回放功能,重看你的对局。

我没想到会这么快引入在线多人对战,但那个头痛 bug 让我觉得有必要尽快提供一个替代方案。