跳到正文
Simon Willison 博客·· 2 小时前精选AI 评分69

Simon Willison 复盘 vibe coding 出 RTS 游戏 Battle Drones 的 12 个版本

Battle Drones - a vibe coded RTS with audio-based multiplayer

AI 导读

Simon Willison 介绍其 vibe coding 实验游戏 Battle Drones,一款 Command & Conquer 风格的浏览器 RTS,经 12 次大版本迭代、约 321 次智能体提交(主要用 Claude Code)完成,支持移动端和桌面端。

推荐理由

作者复盘用 Claude Code 迭代出可玩 RTS 的全过程,关键提示词和版本演进都可迁移到自己的智能体编码项目。

正文 · AI 翻译

2026年10月20日

我最新的 vibe coding 游戏实验是一个《命令与征服》风格的 RTS(即时战略)游戏,名为 Battle Drones(点此试玩)。和我之前的实验不同,这个游戏玩起来真的很有趣。有点不好意思承认,我是靠告诉 Claude“把它做得有趣得多”才达到这个效果的。它还支持附近设备之间的多人对战,用音频来同步游戏状态!以下是我目前做出来的东西,以及一路走来的一些心得。

Battle Drones

我最初的目标是做一个能在手机上玩的 RTS 游戏,风格仿照 Command & Conquer。我对 1995 年的原作有着美好的回忆(我也喜欢红警),想重温一点当年的魔力。

经过 12 次重大迭代(以及编码智能体——主要是 Claude Code——提交的 321 次 commit),我现在有了一个基于浏览器的游戏,可以在手机和桌面端运行,有多种游玩模式、数张地图(包括随机地图生成器),甚至支持两台设备在彼此麦克风收音范围内进行多人对战。

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

目前的功能包括:

  • 9 种建筑、7 种地面载具、6 种空中载具、3 种步兵单位——全部是 3D 模型,你可以在这里浏览
  • 战争迷雾
  • 需要不同的武器来攻击空中或地面载具
  • 六张地图,横跨五种生物群系——温带、沙漠、极地、火山、热带
  • 随机地图生成器
  • 遭遇战模式——红方对阵蓝方,地图呈旋转对称
  • 最后防线模式——一名玩家尽可能抵挡一波又一波的敌人
  • 范围效果武器:弹幕、EMP、空投舱、天锤
  • 补给箱掉落,附带额外资源
  • 能对事件做出响应的游戏内音乐——战斗爆发时会变得更加激烈
  • 不同的游戏内 AI 性格(均衡、快攻、空中蜂群、爆兵、空军、铁甲)
  • 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——它看起来是这样的:

Game screen. Down the right are text icons to build Fab, Airpad, Turret, Harv, Sting, Flak, Scout, Wasp, Raptor. There is a blocky fog of war on a 2D battlefield. There are some gems, an HQ building being attacked by badly rendered tanks, and some blue vehicles dotted around. It's not very visually impressive but it does look like a basic RTS.

它一眼就能认出是 RTS,有建筑机制,能够选择和指挥单位,还有一个基础 AI 可以对抗。

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

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

v2:完整的精灵图

第二个版本(在这里试用 v2)为所有载具添加了精灵图,还加入了“AI 对 AI”模式,这样我就能在不亲自操控的情况下观看游戏运行。

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

Four flying units, three turrets, a harvester and an airpad all have proper sprites now. The scrap field has a new design which doesn't look great but is at least using a graphic.

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——它看起来是这样的:

The map is now an ice map with snow and ice and broken ice - it looks really good. The vehicles and buildings have all had a cosmetic upgrade too. This is starting to look like a real game.

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

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——它看起来是这样的:

The lava map. Uplink satellites are being taken, crystals look better, Elite text is shown above a unit, there is an arrow marked Fight to jump to a fight, the AI vs AI mode has a speed controller - plenty of new features here.

我让 Claude 自己写了发布说明——以下是重点内容:

现在每场遭遇战和每日行动开始时都需要做一个选择,给落后的一方一条翻盘之路,并把军队拉向地图中央。此外还有两种新的游玩方式。

  • 开局:在计时开始前选择闪击、工业或空军。
  • 呼叫支援能力:弹幕、EMP、空投舱和天锤轨道打击。
  • 目标与回收:上行链路中继站、补给空投和值得拆解的残骸。
  • 手感:战斗打击感、自适应音乐、单位语音和播报员。
  • 指挥:战斗警报、游戏速度、保存小队和触摸放置。
  • 新模式:背水一战的生存波次和一个 8 任务行动战役。
  • 进度系统:英雄、带有勋章的战后报告、职业生涯、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版本:

Now it is in 3D - the battlefield is at a slight angle, the buildings and vehicles are all 3D models, the rocks and trees look a bit 3D as well.

新的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版本让那张地图稍微更有趣了一些——它现在看起来是这样的:

Three islands, each with an uplink satellite. Blue holds one, red holds another, A blue condor is flying towards the red island, which is guarded by a red plane. There is a bridge nearby. The theme is tropical islands and looks very pleasant.

v10:Goliath和agent battles

我决定在游戏中加入巨型机器人机甲——想想《环太平洋》里的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

最终结果真的很酷。

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

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

两架Condor飞机可以钩住一个Goliath,此时它就可以在地图上飞行了!

现在,游戏会在你摧毁敌方HQ建筑以及他们可能建造的任何Goliaths时结束。

还有几个与Goliaths相关的mutators:

  • Goliath Armada让每一方开局拥有四个空中Goliaths(每个配有一对Condor),没有其他单位。
  • Robot Love添加了一条特殊规则:如果敌方Goliaths在战场上彼此靠近,它们会坠入爱河,游戏以平局结束。(这要感谢Natalie)。

Agent battles

v10的另一个功能是agent battles。在思考多人游戏如何运作时,我有了一个想法:如果不同的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 的回放,而同一场对战在另一个调试工具中可以查看底层提示词响应。

Screenshot of a replay of a real-time strategy game between two AI models, shown from a top-down view of a snowy map with a dark frozen lake of cracked ice floes on the left and pine forests at the top and lower right. Top bar: pause button, "6:27", "1×", "anthropic/claude-haiku-5-5 · industry" in blue, "gpt-6-luna · industry" in red, a blue-and-red strength bar labeled "B" and "R", and "0:03". Left notification: "Blue: Pushing turrets at the enemy's south-east edge." Replay panel: "Blue anthropic/claude-haiku-5-5 · industry vs Red gpt-6-luna · industry · frostbite seed 42", a timeline slider at "6:27 / 7:48", and buttons "−30s", "+30s", "All", "Blue's eyes", "Red's eyes", "Notes". In the scene, a group of blue tanks and a large blue Goliath mech trailing smoke advance near the ice edge at lower center, while a column of red turrets (one burning) lines the ice to their north, red tanks and trucks sit by a rocky ridge to the east, and red base buildings occupy the top right. A minimap is in the top right corner and zoom in, zoom out and lightning-bolt buttons are on the lower left.

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

还有几个类似这样的回放,链接在 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 生成的一张图片来展示它的工作:

Grid of ten top-down game maps, two per biome (temperate, desert, arctic, volcanic, tropical), each with a river or lava flow, bridges and roads. Title: "Battle Drones: generated maps (108x108, point-symmetric), 2 per biome, runtime ground painter". Each map is captioned with a name and layout type plus a seed and crossing counts, e.g. "Hawthorn Delta · fork" "random-temperate-1x8a6r2 · 6 bridges, 4 fords"; layout types are fork, badlands, crossing and 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,它运行起来零成本,而我不想在某处启动一台服务器,然后还要一直负责维护它运行,只要还有人可能想玩这个游戏。

一些想法

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

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

今天早上(来自 Hacker News)我看到了《Steam 玩家恳求出无 AI 过滤器,因为 Steam Next Fest 充斥着粗制滥造之作》。我个人做梦也不会想把 Battle Drones 提交到这样的活动中——它还是太粗制滥造了,不足以被当作一个正经的独立游戏项目来考虑。

……但我现在能看到一条路径,让这种 vibe coding 出来的游戏被认真对待。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 进行音乐创作的一次实验。
  • 我至今仍无法释怀“让它变得有趣得多”这个提示词的效果竟然这么好。
  • 工具基本上是免费的。我通过提示词做出了 Radio Probe、Model browser、Agent vs. Agent 调试工具,而 Claude Code 为自己构建了一堆工具,连我自己都还没探索过。
  • 静态 HTML 游戏之间基于音频的多人游戏可以运行!我希望看到更多游戏采用这种相同的模式——今天四处翻查后,除了 Alon Horesh 的 Siner 和 Georgi Gerganov(也是 llama.cpp 的创作者)的 ggwave 之外,我没找到多少先例。
  • Claude Code 的“Ultracode”烧起 token 来简直不计后果,但它也能仅凭一个提示词解决复杂问题(比如添加基于音频的多人游戏)。
  • 我仍然无法完全摆脱以这种方式构建软件的愧疚感。在一个我几乎没有多少经验的领域里,我觉得自己并没有资格创造出这么好的东西!到目前为止,我已经私下把它展示给了足够多的人,以至于不把它发布出来让其他人看到并从中学习,反而让我觉得不妥。

来源:Simon Willison 博客 · simonwillison.net