跳到正文
RadarAI· Simon Willison 博客·· 2 小时前AI 评分58

Simon Willison 复盘 vibe coded RTS 游戏 Battle Drones 的 12 版迭代过程

AI 导读

Simon Willison 用 Claude Code 等 coding agent 开发了 Command & Conquer 风格 RTS 游戏 Battle Drones,经 12 个大版本、321 次 agent 提交后在浏览器和手机上可玩。

正文 · AI 翻译

Simon Willison 博客·2026-10-21 03:34· 1 小时前AI 评分65

Battle Drones——一款通过音频实现多人对战的 vibe coding 即时战略游戏

AI 导读

Simon Willison 介绍他用 Claude Code 等 coding agent 开发的 Command & Conquer 风格 RTS 游戏 Battle Drones,经 12 个大版本、321 次 agent 提交后在浏览器和手机上可玩。

正文 · 原文

我最新的 vibe coding 游戏实验是一款 Command & Conquer 风格的 RTS(即时战略)游戏,名为 Battle Drones(点此游玩)。与我之前的实验不同,这一款玩起来真的很有趣。我有点不好意思承认,我是靠告诉 Claude“让它有趣得多”才做到这一点的。它还支持附近设备之间通过音频同步游戏状态进行多人对战!以下是我目前构建的内容,以及一路走来学到的一些东西。

Battle Drones

我最初的目标是打造一款能在手机上玩的 RTS 游戏,风格类似 Command & Conquer。我对 1995 年的原版有着美好的回忆(我也喜欢 Red Alert),想重温一点当年的魔力。

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

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

目前的功能包括:

  • 9 种建筑、7 种地面载具、6 种空中载具、3 种步兵单位——全部为 3D 模型,你可以在这里浏览
  • 战争迷雾
  • 需要不同武器来攻击空中或地面载具
  • 六张地图,横跨五种生物群系——温带、沙漠、极地、火山、热带
  • 随机地图生成器
  • 遭遇战模式——红方对蓝方,地图呈旋转对称
  • 背水一战模式——一名玩家抵御尽可能多的敌人波次
  • 范围效果武器:弹幕、EMP、空投舱、天锤
  • 补给箱掉落,附带额外资源
  • 随事件变化的游戏内音乐——战斗爆发时音乐会变得更加激烈
  • 不同的游戏内 AI 性格(均衡、速攻、空中蜂群、爆兵、天空力量、铁甲)
  • AI 对 AI 模式,观看这些性格互相对战
  • Goliath——一台巨大的践踏机甲,拥有激光眼和臂炮,并能建立新基地
  • 变异器,可添加额外规则或变化
  • “每日行动”挑战
  • 等级与成就(奖章)
  • Agent 对 Agent 模式,两个 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 Image Generation 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、空投舱和天锤轨道打击。
  • 目标与回收:上行链路中继、补给空投和值得拆解的残骸。
  • 手感:战斗打击感、自适应音乐、单位语音和播报员。
  • 指挥:战斗警报、游戏速度、已保存小队和触摸放置。
  • 新模式: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 版本:

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 和特工战斗

我决定在游戏中加入巨型机器人机甲——想想 Pacific Rim 中的 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

最终结果真的很酷。

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 的回放,同一场对战在另一个调试工具中的回放则展示了底层的提示词响应。

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.

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

还有几个类似的回放链接在 README 中。我希望将来能把它做成一个完整的联赛积分榜。

v11:随机地图

这个版本纯粹是因为有一天我瞥了一眼自己的Claude 用量页面,发现每周额度只用了 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,它运行起来不花一分钱,而我不想在某处启动一台服务器,然后还得一直负责维护它运行,只要还有人可能想玩这个游戏。

一些想法

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

游戏的风险也极低。最坏的情况也不过是我的某个傻乎乎的ゲーム实验出了个 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、模型浏览器、Agent 对 Agent 调试工具,而 Claude Code 为自己构建了一堆工具,我自己甚至都还没探索过。
  • 静态 HTML 游戏之间基于音频的多人游戏可以工作!我希望看到更多游戏使用同样的模式——今天在四处查找时,除了 Alon Horesh 的 Siner 和 Georgi Gerganov(也是 llama.cpp 的作者)的 ggwave 之外,我没有找到多少先例。
  • Claude Code“Ultracode”消耗 token 如流水,但它也能通过单个提示词解决复杂问题(比如添加基于音频的多人游戏)。
  • 我仍然无法完全摆脱以这种方式构建软件的愧疚感。我觉得自己并没有资格在一个我几乎没有相关经验的领域里创造出这么好的东西!到现在为止,我已经私下把它展示给了足够多的人,以至于不把它发布出来让其他人看到并从中学习,会让我觉得不对。

标签:game-design、projects、ai、generative-ai、llms、claude、vibe-coding、coding-agents、claude-code

来源:Simon Willison 博客 · simonwillison.net

来源:RadarAI · aihot.news