Battle Drones—a vibe coded RTS with audio-based multiplayer
打开互动全文版(逐段中英对照 + 针对本篇提问)→本文介绍《战斗无人机》(Battle Drones)——一款几乎完全借助 Claude Code 等编程智能体、以氛围编程方式构建的浏览器即时战略游戏,并记录了它在十二个主要迭代版本中的演进过程。作者几乎没有游戏开发经验,通过“让它好玩得多”“增加视觉打磨”之类的提示词驱动智能体,最终产出了 3D 模型、多张地图与生物群系、性格各异的 AI、智能体对智能体的对战,以及一个名为 Goliath 的巨型机甲单位。本文的核心论点是:编程智能体如今已能构建不仅视觉上令人信服、而且真正好玩的游戏,这推翻了作者此前认为它们只能做出“看起来像游戏”的东西的看法。一个值得注意的特性是附近设备之间通过音频消息同步的多人模式,它无需运行服务器,并使游戏保持为静态 HTML。作者总结道:氛围编程游戏被认真对待的道路已经出现,而静态 Web 技术加上能力强大的模型,构成了一种极具吸引力的游戏开发媒介。
This article describes Battle Drones, a browser-based real-time strategy game built almost entirely through vibe coding with coding agents such as Claude Code, and documents its evolution across twelve major iterations. The author, who has little game development experience, used prompts like "Make it a LOT more fun" and "add visual polish" to drive the agents, which produced 3D models, multiple maps and biomes, varied AI personalities, agent-versus-agent battles, and a giant mech unit called the Goliath. The core argument is that coding agents can now build games that are not only visually convincing but genuinely fun to play, contradicting the author's earlier belief that they could only produce things that look like games. A notable feature is multiplayer between nearby devices synchronized through audio messages, which avoids running a server and keeps the game as static HTML. The author concludes that a path now exists for vibe coded games to be taken seriously, and that static web technologies plus capable models make a compelling medium for game development.
我最新的氛围编程游戏实验是一款《命令与征服》风格的 RTS(即时战略)游戏,名为 Battle Drones(可在此处游玩)。与我之前的实验不同,这一款**玩起来确实有趣**。我有点不好意思承认,我是靠告诉 Claude“让它有趣得多”才做到这一点的。它还支持附近设备之间通过音频同步游戏状态来进行多人对战!以下是我目前构建的内容,以及在此过程中学到的一些东西。
My latest vibe coded game experiment is a Command & Conquer style RTS (Real Time Strategy) game called Battle Drones (play it here). Unlike my previous experiments, this one is _actually fun to play_. I'm somewhat embarrassed to admit that I got there by telling Claude to "Make it a LOT more fun". It also supports multiplayer between nearby devices using audio to synchronize game state! Here's what I've built so far, and some of the things I learned along the way.
我最初的目标是构建一款我可以在手机上玩的 RTS 游戏,风格类似于《命令与征服》。我对 1995 年的原版游戏有着美好的回忆(我也喜欢《红色警戒》),并希望重新捕捉到一点那种魔力。
My initial goal was to build an RTS game I could play on my phone, in the style of Command & Conquer. I have fond memories of the 1995 original (I liked Red Alert too) and wanted to recapture a little bit of the magic.
经过 12 次重大迭代(以及由编码智能体(主要是 Claude Code)完成的 321 次提交),我现在有了一个基于浏览器的游戏,它可以在移动端和桌面端运行,有多种游戏模式、几张地图(包括随机地图生成器),甚至支持两台设备在彼此麦克风范围内的多人游戏。(更新:也支持在线多人游戏;音频多人游戏引发了头痛!)
After 12 major iterations (and 321 commits by coding agents, mainly Claude Code) I now have a browser-based game that works on mobile and desktop, has multiple play modes, several maps (including a random map generator) and even supports multiplayer for two devices within microphone range of each other. (Update: also online multiplayer; the audio multiplayer induced headaches!)
这是在桌面浏览器中运行《战斗无人机》的视频演示:
Here’s a video demo of Battle Drones running in a desktop browser:
* 9 种建筑、7 种地面车辆、6 种空中车辆、3 种步兵单位——全部是 3D 模型,你可以在这里浏览
* 9 buildings, 7 ground vehicles, 6 aerial vehicles, 3 infantry units—all 3D models, which you can browse here
* 需要不同的武器来瞄准空中或地面车辆
* Different weapons are needed to target aerial or ground vehicles
* 六张地图,横跨五种生物群系——温带、沙漠、极地、火山、热带
* Six maps, across five biomes—temperate, desert, arctic, volcanic, tropical
* 遭遇战模式——在旋转对称地图上进行红蓝对抗
* Skirmish mode—red vs. blue on a rotationally symmetrical map
* 坚守模式——一名玩家尽可能抵御一波又一波的敌人
* Last Stand mode—one player holds out against as many waves of enemies as possible
* 范围效果武器:弹幕、EMP、空投舱、天锤
* Area effect weapons: Barrage, EMP, Drop Pod, Sky Hammer
* 响应事件的游戏内音乐——随着战斗爆发而愈发激烈
* In-game music that responds to events—it gets more intense as fighting breaks out
* 不同的游戏内 AI 性格(Balanced、Rush、Air Swarm、Boom、Skyforce、Ironclad)
* Different in-game AI personalities (Balanced, Rush, Air Swarm, Boom, Skyforce, Ironclad)
* AI 对战 AI 模式,可观看这些性格彼此对战
* AI vs. AI mode, to watch those personalities play each other
* Goliath——一台巨型践踏机甲,拥有激光眼和臂炮,并能够建立新基地
* The Goliath—a giant stomping mech with laser eyes and arm cannons and the ability to establish a new base
* 添加额外规则或变化的变异器(Mutators)
* Mutators that add extra rules or twists
* 智能体对战智能体模式,其中两个 LLM 可以互相对战 Battle Drones
* Agent vs. Agent mode where two LLMs can play Battle Drones against each other
* 一种基于两台邻近手机通过音频消息通信的多人模式,是我早先 Chirp Pong 实验的延伸
* A multiplayer mode based on two nearby phones communicating via audio messages, an extension of my earlier experiment with Chirp Pong
Battle Drones 在很大程度上是“氛围编程”(vibe coding)的产物——我几乎没有审查过其中的代码,而且它是用一种我本人几乎没用过的语言(TypeScript)构建的。不过我对其进行了相当多的试玩测试,并且自项目启动以来,它已经经历了大量迭代。
Battle Drones is heavily vibe coded—I've reviewed almost none of the code, and it's built in a language (TypeScript) that I've hardly used myself. I've playtested it quite a bit though, and it's been through a large number of iterations since I started the project.
以下是该项目迄今为止的大致历程,包括关键提示词(prompts)和对话记录(transcripts)的链接。
Here's a rough history of the project so far, including key prompts and links to transcripts.
我在七月从 Claude Fable 5 开始:
I started out with Claude Fable 5 back in July:
我们要构建一款移动端友好的 RTS 游戏——《命令与征服》风格——名为 Battle Drones,其中两支无人机军队(包括飞行和地面单位)为领土和资源而战。
We are going to build a mobile-friendly RTS game — Command & Conquer style — called Battle Drones, in which two armies of drones (both flying and ground-based) battle for territory and resources.
我们先从 MVP 设计开始,问我一些问题。
Let's start with an MVP design; ask me some questions.
这是一份共享的对话记录。我给 Claude Code for Web 设置了一个包含 OpenAI API 密钥的环境变量,并让它使用 OpenAI Image Generation API 来生成素材,这让我得到了一些基础精灵图。
Here's a shared transcript. I'd given Claude Code for Web an environment variable with an OpenAI API key and told it to use the OpenAI Image Generation API for assets, which got me some basic sprites.
它已经能被认出是一款 RTS,具备建造机制、选择和指挥单位的能力,以及一个可供对战的基础 AI。
It's recognizable as an RTS, has building mechanics and the ability to select and direct units, and a basic AI to play against.
这第一个版本勉强算是一个概念验证,而且玩起来一点也不有趣。
This first version was barely a proof of concept, and it wasn't any fun to play.
Claude 在这些早期版本中使用了 Phaser 2D 游戏框架。直到经过了好几轮迭代之后,我才意识到这一点!
Claude used the Phaser 2D game framework for these early versions. I didn't even realize this until several iterations later!
第二个版本(可在此试用 v2)为所有载具添加了精灵图,并加入了“AI 对 AI”模式,这样我就能观看游戏自行运行,而无需亲自直接操控。
The second version (try v2 here) added sprites for all of the vehicles and the “AI vs. AI” mode, so I could watch the game playing without having to directly control it myself.
Claude 在提示 OpenAI 的图像模型生成精灵图方面表现得相当胜任。你可以在 public/assets/sprites 文件夹中浏览 v2 的精灵图。
Claude proved reasonably competent at prompting OpenAI’s image models to generate sprites. You can browse the v2 sprites in the public/assets/sprites folder.
它仍然不太好玩,而且画面很无聊。此时已是十月,我已经升级到了 Claude Opus 5.5。我告诉它:
It still wasn't much fun, and the graphics were boring. It was now October, and I had upgraded to Claude Opus 5.5. I told it:
大幅改进这个游戏。把画面和玩法做得更好(保持对移动端友好)。使用最新的 OpenAI GPT 图像 API(查阅细节)渲染新的图形,API 密钥放在环境变量中。添加新的单位类型,并更好地平衡玩法。还要添加新的建筑,以及更好、更多样的地形。
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——它看起来是这样的:
This resulted in five new maps with generated background tiles in a variety of styles, visible here. Opus also regenerated the sprites, making them much more visually appealing. You can try v3 here—it looks like this:
这开始让人感觉像一款真正的游戏了!不过玩起来仍然不太有趣——我发现自己很快就感到无聊了。
This is starting to feel like a real game! It still wasn't very fun to play though—I found myself getting bored pretty quickly.
到目前为止,我的 Battle Drones 实验印证了我先前的看法:编程智能体能够造出一个看起来像游戏的东西,却无法真正做出让人玩起来欲罢不能的作品。
So far my Battle Drones experiment was confirming my previous belief that coding agents can build a thing that looks like a game but can't actually make something that's genuinely compelling to play.
我在一次晚餐时把这个观点讲给某人听,随后心想,我应该给这些模型一个正经的机会来证明我错了。我在手机上向 Opus 5.5 输入了提示词:
I shared this theory with someone over dinner, and then thought to myself that I should give the models a proper chance to prove me wrong. I prompted Opus 5.5 on my phone:
这个游戏还不够好玩。让它变得**好玩得多**。
This game isn't fun enough yet. Make it a LOT more fun.
这一次我运行在 Ultracode 模式下,在该模式下 Claude Code(此处为 Claude Code for Web)会运行“动态工作流”,其文档中的描述是:
This time I was running in Ultracode mode, where Claude Code (in this case Claude Code for Web) runs "dynamic workflows", described in their docs as:
动态工作流是一个 JavaScript 脚本,可同时编排多个子智能体。
A dynamic workflow is a JavaScript script that orchestrates many subagents at once.
这开启了 _数小时_ 的工作。我晚上开始,直到第二天凌晨才得到可玩的结果。但结果非常壮观。
This kicked off _many hours_ of work. I started it in the evening and didn’t get a playable result back until late into the next morning. But the results were spectacular.
我让 Claude 写了自己的发布说明——以下是亮点:
I had Claude write its own release notes—here are the highlights:
现在每场遭遇战和每日行动都以选择开局,给落后的一方翻盘的机会,并将军队拉到地图中央。还有两种新的游戏方式。
Every skirmish and Daily Op now opens with a choice, gives the side that’s losing a way back, and pulls the armies into the middle of the map. There are also two new ways to play.
* 开局:在计时开始前选择闪电战、工业或空军联队。
* Openers: pick Blitz, Industry or Air Wing before the clock starts.
* 呼叫能力:弹幕、电磁脉冲、空投舱和天锤轨道打击。
* Call-down powers: Barrage, EMP, Drop Pod and the Sky Hammer orbital strike.
* 目标与回收:上行链路中继、补给空投以及可拆解为废料的残骸。
* Objectives and salvage: Uplink relays, supply drops and wrecks worth scrap.
* 手感:战斗打击感、自适应音乐、单位语音与播报员。
* Feel: combat juice, adaptive music, unit voices and an announcer.
* 指挥:战斗警报、游戏速度、小队存档与触屏部署。
* Command: battle alerts, game speed, saved squads and touch placement.
* 新模式:Last Stand 生存波次与 8 个任务的 Ops 战役。
* New modes: Last Stand survival waves and an 8-mission Ops campaign.
* 成长:英雄、带奖励的战后报告、职业生涯、7 个变异因子与每日行动。
* Progression: heroes, an after-action report with awards, a career, 7 mutators and a Daily Op.
战斗持续时间更长,局势波动更大。在 Normal 难度下的 1,200 场 AI 对 AI 测试对局中,25 分钟后仍未分出胜负的对局比例从 14% 降至 0.9%。曾落后 800+ scrap 的一方最终获胜的比例从 24% 上升至 46%。
Fights run longer and swing more. In 1,200 AI-vs-AI test matches on Normal, games still undecided after 25 minutes fell from 14% to 0.9%. The share of wins by a side that had been 800+ scrap behind rose from 24% to 46%.
Claude 耗时如此之久的部分原因在于,它运行了一千多场模拟试玩会话,并利用这些结果重新平衡现有单位、添加新单位,并引入新功能。
Part of the reason Claude took so long was that it ran over a thousand simulated playtest sessions, and used the results to rebalance the existing units, add new ones, and introduce new features.
在 Ultracode 于“让它有趣得多”这一目标上取得成功之后,我决定更加雄心勃勃:
After the success of Ultracode at "Make it a LOT more fun", I decided to be more ambitious:
将这款游戏移植到 three.js,并为所有建筑、载具和地形景观制作 3D 模型
Port this game to three.js with 3D models for all of the buildings and vehicles and landscapes
那又是一次通宵运行。我醒来时看到了这个 v5 版本:
That was another overnight run. I woke up to this v5 version:
新的 3D 模型完全由 Claude 用 TypeScript 代码构建。
The new 3D models were entirely constructed by Claude in TypeScript code.
v6(在此游玩 v6)增加了一些视觉上的打磨。v7(游玩 v7)加入了机器人步兵(步兵、火箭小队、狙击手)以及一架名为“Condor”的运兵飞机。
v6 (play v6 here) added some more visual polish. v7 (play v7) added robot infantry (troopers, rocket squads, snipers) and a "Condor" troop carrying aircraft.
我开始感到内疚,因为我对游戏的实际设计投入太少了——过去几个版本真的就是我说“让它更有趣”和“增加视觉打磨”。
I was beginning to feel guilty at how little actual design input I had into the game—it really had been a case of me saying “make it more fun” and “add visual polish” for the past few releases.
我注意到 AI 并不经常使用 v7 中新增的步兵和运兵飞机——并没有很好的战略理由去使用它们。
I’d noticed that the AI didn’t use the new infantry and troop carrying aircraft from v7 very often—there wasn’t a great strategic reason to use them.
如果我们有一张新地图,加上新的游戏机制,积极鼓励玩家用秃鹰装载步兵机器人并派往地图,那就太好了。
It would be neat if we had a new map with a new game mechanic that actively encouraged players to load up Condors with infantry robots and send them out into the map.
设计一张新地图。目标是创造不同的战略激励,鼓励使用步兵、秃鹰和空中载具。
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.
军队始终以一架 Condor 和一个单兵小队开局。若某支军队没有 Condor,将免费提供一架新的 Condor,它从最靠近其 HQ 的地图边缘飞入并降落于此。这架免费 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.
两个 HQ 应完全被水域隔开,但仍可通过地图上不同位置的两座桥梁供车辆通行。
The two HQs should be entirely separated by water, but still accessible by vehicles thanks to two bridges across the map in different places.
我希望鼓励围绕上行链路(uplink)展开争夺战。
I want to encourage a battle over uplinks.
地图尺寸应为其他地图的三倍——仍为正方形。
The map should be three 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 版本让这张地图变得更有意思了一些——它现在看起来是这样的:
The result was the tropical Archipelago map, with seven island uplinks that players can only capture by flying out infantry in a Condor. It's definitely the most fun map to play, once you've got the hang of the basic game mechanics from the simpler maps. The v9 edition made that map a little more interesting—it now looks like this:
我决定在游戏中加入巨型机器人机甲——想想《环太平洋》中的机甲猎人,或者《战锤 40K》中的泰坦。
I decided to add giant robot mechs to the game—think Jaegers from Pacific Rim or Titans from Warhammer 40,000.
以下是我与 Claude 头脑风暴时使用的一些提示:
Here are some of the prompts I used to brainstorm with Claude:
帮我头脑风暴一些为这个游戏加入巨型机器人的想法——想想《战锤 40K》中的无畏机甲或泰坦——我们如何以增强游戏性、保持平衡、增加独特转折的方式来实现?先不要想太多。
Help me brainstorm ideas for adding giant robots to this game - think dreadnoughts or titans from Warhammer 40,000 - 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 the 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.
[...] 我们让两架 Condor 来携带机甲吧。
[...] Let's do two Condors—they can carry the mech.
Goliath 可以通过 Gantry 建造——Gantry 是一种只有在先建成 Fab、Bay、Airpad 和 Tech Lab 之后才能创建的建筑物。你可以看到正在建造中的 Goliath,随后它会从 Gantry 中走出,并在地图上行进。
Goliaths can be constructed using a Gantry—a building that can only be created after first building a Fab, Bay, Airpad, and Tech Lab. You can see the Goliath under construction, and it then walks out from the Gantry and can march around the map.
Goliath 可以“锚定”,即将其自身固定在地面上。在锚定状态下,它们可以充当新的 HQ,在新区域建造步兵单位和额外建筑。
Goliaths can "anchor", which digs them into the ground. In their anchored state they can act as a new HQ, constructing infantry units and additional buildings in a new area.
两架 Condor 飞机可以钩住一架 Goliath,此时它就能被空运到地图各处!
Two Condor aircraft can hook onto a Goliath, at which point it can be flown around the map!
现在,当您摧毁敌方总部建筑**以及**他们可能建造的任何 Goliath 时,游戏结束。
The game now ends when you destroy the enemy's HQ building _and_ any Goliaths they might have built.
还有几个与 Goliath 相关的突变因子:
There are also a couple of mutators relating to Goliaths:
* Goliath Armada 使双方开局各拥有四个空中 Goliath(每个配备一对 Condor),且没有其他单位。
* Goliath Armada starts each side with four airborne Goliaths (each with a pair of Condors) and no other units.
* Robot Love 增加特殊规则:如果敌方的 Goliath 在战场上彼此靠近,它们会相爱,游戏以平局结束。(感谢 Natalie 提出这个点子)。
* Robot Love adds a special rule: if enemy Goliaths get close to each other on the battlefield they fall in love and the game ends in a draw. (Thank Natalie for that one).
v10 的另一个功能是智能体对战。在思考多人对战该如何实现时,我有了一个想法:如果让不同的 LLM 在游戏里一决高下会怎样?
The other v10 feature is agent battles. While musing about how multiplayer could work, I had an idea: what if different LLMs could fight it out in the game?
有趣的额外挑战:想一想我们怎样才能让编程智能体也能参与多人对战。如果我们能安排一场例如 GPT-6 Sol 与 Claude Opus 5.5 之间的对战,那就太棒了——每个模型都能访问一个工具,该工具为它提供游戏信息(大概是非视觉的,只包含它通过战争迷雾等能看到的信息),并让它控制自己的单位等 [...]
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, e.g., GPT-6 Sol and Claude Opus 5.5, where each model has access to a tool that gives it information about the game (presumably non-visual, but only the information it could see through fog of war, etc.) and lets it control its units, etc. [...]
查阅 ~/dev/llm/docs,并在该文件中记录关于如何通过一个新的工具插件在此处使用 LLM 的说明。
Consult ~/dev/llm/docs and include notes in that file about how an LLM could be used here via a new tools plugin.
Opus 5.5 着手处理此事,产出了这份 AGENT-BATTLES.md 提案,随后实现并测试了它。该功能还包括录制和回放这些对战的能力——这里是 Claude Haiku 5.5 对阵 GPT-6 Luna 的回放,而这里是同一场对战在一个独立调试工具中的呈现,该工具展示了底层的提示词响应。
Opus 5.5 went to work on this, producing this AGENT-BATTLES.md proposal and then implementing and testing it. The feature also includes the ability to record and replay these battles—here's a replay of Claude Haiku 5.5 vs. GPT-6 Luna, and here's that same battle in a separate debug tool that shows the underlying prompt responses.
驱动智能体对战的提示词可以在这里看到。
The prompt that drives agent battles can be seen here.
README 中还链接了若干类似的回放。我希望未来某个时候能将其整理成一张完整的联赛积分表。
There are a few more replays like this linked in the README. I hope to turn this into a full league table at some point in the future.
这个版本的存在纯粹是因为有一天我瞥了一眼我的 Claude 使用量页面,发现我每周额度只用了 75%,而额度将在 45 分钟后重置。我决定看看能否用剩余的 token 额外做出一个 Battle Drones 功能,于是把“随机地图”选为目标:
This version exists purely because I glanced at my Claude Usage page one day and saw that I'd only used 75% of my weekly allowance and it was resetting in 45 minutes. I decided to see if I could get an extra Battle Drones feature from my remaining tokens, and picked "random map" as the target:
设计并实现一种使用任意可用生物群系生成随机地图的机制——它应当具有最大地图的尺寸,并且河流、桥梁、岩石、森林、废料和晶体都要参与其中。让它们具有旋转对称性,并使用种子以便之后能够选择或复用。你有 45 分钟来完成这个!发挥创意。
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 生成的一张展示其工作过程的图片:
Here's the transcript, and an image Claude generated to show me its work:
我**刚刚**才让这个功能跑通,所以还没什么时间对它进行主动测试。最新版 Battle Drones 现在支持多人游戏了——只要两台设备彼此处于麦克风可及的距离内即可!
I only _just_ got this working, so I've not had much time to actively test it yet. The latest Battle Drones now supports multiplayer via two devices sat within microphone distance of each other!
这个功能最初源于我上周的 Chirp Pong 实验。我把 Claude Code 指向那个可用的概念验证:
This feature started out as my Chirp Pong experiment from last week. I pointed Claude Code at that working proof of concept:
从 GitHub 克隆 Simonw/tools,并查看最近的分支,找到那个使用网页麦克风、通过音频信号在两部手机之间实现多人游戏的示例 pong 游戏
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
为 battledrones 构建一个该游戏的版本
Build a version of that for battledrones
Opus 构建了这个 Radio Probe 工具,用来测量两台设备之间能获得多大带宽;基于该工具得到的积极结果,它实现了一套完整的音频调制解调器系统。到目前为止,我已经在笔记本电脑、iPhone 和 iPad 之间试过,效果似乎非常好!
Opus built this Radio Probe tool to measure how much bandwidth we could get between two devices and, based on positive results from that, implemented a full audio modem system. I've tried it between laptops, iPhones and iPads so far and it seems to work really well!
为什么为此使用声音?因为我喜欢零运行成本的静态 HTML,而且我不想在某处启动一台服务器,然后只要还有人可能想玩这个游戏,就得一直负责维持它的运行。
Why use sound for this? Because I love static HTML that costs nothing to run, and I don't want to spin up a server somewhere and then stay responsible for keeping it operating for as long as anyone might want to play the game.
我对游戏开发几乎**一无所知**。这反而成了一个绝佳机会:在一个我已有的软件工程经验对结果影响较小的领域里,试用编码智能体。
I know almost _nothing_ about game development. This makes it a great opportunity to try out coding agents in a field where my existing software engineering experience has less impact on the results.
游戏本身也风险极低。最坏的情况也不过是我某个愚蠢的游戏实验出了个 bug。
Games are also super low stakes. The worst that can happen is one of my silly game experiments suffers a bug.
今天早上(通过 Hacker News)我看到一篇文章《Steam 玩家恳求推出无 AI 过滤器,因为 Steam Next Fest 充斥着粗制滥造之作》。我个人绝不会想把 Battle Drones 提交到这样的活动——它仍然太过粗糙,不足以被视为一个正经的独立游戏项目。
This morning (via Hacker News) I found "Steam Fans Are Begging for a No-AI Filter as Steam Next Fest Is Filled With Slop". I wouldn't personally dream of submitting Battle Drones to an event like this—it's still way too low effort to warrant consideration as a legitimate indie gaming project.
……但我现在能看到一条路径,让这类“凭感觉编码”(vibe coded)的游戏被认真对待。Battle Drones 很好玩,画面不错,还有创新特性(据我所知,通过音频实现多人联机在 RTS 中尚属首次)。
... but I can now see a path to vibe coded games like this being taken seriously. Battle Drones is fun, it looks good, it has innovative features (the multiplayer-over-audio thing is a first for an RTS as far as I can tell).
我很想看看,一个比我更有品味、并且有强烈热情去打造真正卓越作品的人,能做出什么样的东西!
I'd love to see what someone with better taste than me and a driving passion to produce something truly exceptional could build!
关于这个项目,还有几点其他观察:
A few other observations from this project:
* 静态 HTML 和 JavaScript 是游戏开发的绝佳媒介。WebGL 运行良好,而 Three.js(以及更早的 Phaser)是极佳的构建平台,当前的模型对它们了如指掌。
* Static HTML and JavaScript is a fantastic medium for games development. WebGL works great, and Three.js (and Phaser before it) are excellent platforms to build on that the current models know inside out.
* 这也让它们能够以渐进式 Web 应用(Progressive Web App)的形式运行——我并没有要求这一点,但 Battle Drones 可以离线运行。尽管我从未直接安装过它,却能在飞机上玩它——我的手机已经缓存了它。
* This also lets them run as Progressive Web Apps—I didn’t ask for it, but Battle Drones works offline. I was able to play it on a plane despite never having directly installed it—my phone had it cached.
* 给 Claude 一个 OpenAI API 密钥,并让它使用 OpenAI 的模型生成图像,效果非常好。它能够查看自己生成的图像,并据此迭代提示词。
* Giving Claude an OpenAI API key and telling it to generate images using OpenAI’s models works really well. It can view the images it has generated and iterate on the prompts.
* Opus 5.5 在使用 Three.js 进行 3D 建模方面表现出色(在 Blender 中也是如此,无疑在其他 3D 应用中同样如此)。GPT-6 Astra 也是如此。它们完全有能力为 3D 游戏项目构建模型。
* Opus 5.5 is spectacular at 3D modeling using Three.js (and Blender, and no doubt other 3D applications as well). The same is true of GPT-6 Astra. They are absolutely capable of building models for 3D game projects.
* 对于回放和多人游戏等功能,拥有一个确定性的模拟引擎是很有用的。有一次,Claude 不得不将 Math.sin() 和 Math.cos() 等函数的调用替换为自定义版本,因为不同的浏览器(例如 Chrome 与 Safari)返回的数值略有不同,导致回放不同步。
* For features like replay and multiplayer it’s useful to have a deterministic simulation engine. At one point Claude had to replace calls to Math.sin() and Math.cos() and friends with custom versions because different browsers (Chrome vs. Safari, for example) returned very slightly different numbers, desynchronizing the replay.
* Opus 5.5 可以创作音乐!这个项目中没有音频文件——配乐完全通过代码生成,在不同地图中有所变化,甚至随着战斗升温而变得更加激烈。参见 Scrimshaw Jukebox,这是之前用 Claude 进行音乐创作的一个实验。
* Opus 5.5 can write music! There are no audio files in this project—the soundtrack is entirely generated through code, varies across different maps, and even gets more intense as the battle heats up. See Scrimshaw Jukebox for a previous experiment with Claude for music composition.
* 我仍然无法释怀“让它变得有趣得多”这个提示词的效果有多好。
* I still can’t get over how well the prompt “Make it a LOT more fun” worked.
* 工具实际上是免费的。我提示构建了 Radio Probe、模型浏览器、Agent vs. Agent 调试工具,而 Claude Code 为自己构建了一堆我甚至还没探索过的工具。
* Tools are effectively free. I prompted up the Radio Probe, the Model browser, the Agent vs. Agent debug tool, and Claude Code built a bunch of tools for itself that I haven’t even explored myself.
* 静态 HTML 游戏之间基于音频的多人游戏是可行的!我希望看到更多游戏使用这种相同的模式——今天在挖掘过程中,除了 Alon Horesh 的 Siner 和 Georgi Gerganov(也是 llama.cpp 的成名者)的 ggwave 之外,我没有发现太多先例。
* Audio-based multiplayer between static HTML games works! I hope to see a whole lot more games use this same pattern—in digging around today I’ve not found much prior art beyond Siner by Alon Horesh and ggwave by Georgi Gerganov (also of llama.cpp fame).
* Claude Code 的“Ultracode”模式消耗 token 如同没有明天,但它也能仅凭一条提示词就解决复杂问题(比如加入基于音频的多人模式)。
* Claude Code "Ultracode" burns tokens like there's no tomorrow, but it can also solve complex problems (like adding audio-based multiplayer) from a single prompt.
* 我至今仍未能完全摆脱以这种方式构建软件的_负罪感_。在一个我此前经验如此之少的领域里,我并不觉得自己有资格创造出如此出色的东西!事到如今,我已经私下把它展示给了足够多的人,若再不公开发布、让其他人也能看到并从中学习,反倒显得不妥了。
* I'm still not quite over the _guilt_ of building software in this way. I don't feel like I've earned the right to create something this good, in a field in which I have so little prior experience! At this point I've shown it to enough people in private that it felt wrong not to publish it for everyone else to see and learn from.
游戏的风险也极低。最坏的情况也不过是我某个傻乎乎的游戏实验出了个 bug。
Games are also super low stakes. The worst that can happen is one of my silly game experiments suffers a bug.
然后我试着和 Natalie 一起玩多人版本……结果那尖锐的调制解调器音效让她头痛得厉害!
Then I tried playing the multiplayer version with Natalie... and the high-pitched modem sounds gave her a nasty headache!
这算是个挺严重的 bug。我加了一条警告,随后受到启发,决定构建真正的网络多人功能。我尝试让 WebRTC 跑起来,但即便在我自己的 WiFi 网络上,也无法在我自己的两台设备之间建立连接,于是我让 Claude 改为构建一个简单的、无状态的 WebSockets 中继服务器:
That's a pretty bad bug. I added a warning and was then inspired to build proper network multiplayer. I tried getting WebRTC to work but couldn't get a connection going between two of my own devices even on my own WiFi network, so I had Claude build a simple, stateless WebSockets relay server instead:
如果我想以极低的成本在两台设备之间支持多人游戏,且不在服务器上存储任何状态,我能否用一个运行在最便宜 Fly 实例上的小型 asyncio Web 服务器来实现?
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?
构建该服务器以及用于部署的 fly.toml。使用 Fly 应用名 battledrones-relay——把它放在仓库中的一个文件夹里,并在该文件夹的 README 中包含部署说明。
Build the server and the fly.toml for deploying it. Use the Fly application name battledrones-relay — put that in a folder in the repo, and include deploy instructions in the README in that folder.
这是最终得到的服务器。由于它可以缩容到零,并且运行在单个 Fly.io shared-cpu-1x 实例上,我的花费应该不超过每月 2.19 美元——而且这还是假设它全程保持热启动并持续处理连接的情况。
Here's the resulting server. Since this scales to zero and runs on a single Fly.io shared-cpu-1x instance, it should cost me no more than $2.19/month—and that's if it stays hot and serving connections the whole time.
Battle Drones 现已支持在线多人对战。点击“Duel a friend online”,然后通过你常用的消息应用分享生成的房间 URL,或者让对方拍下所显示的二维码。
Battle Drones now supports online multiplayer. Click "Duel a friend online", then either share the resulting room URL via your messaging app of choice or have them snap a picture of the displayed QR Code.
我还添加了一项功能:对局结束后,你可以复制该对局的 JSON,再将其输入回放功能,以重新观看你的比赛。
I also added a feature where you can copy the JSON of the match once it has ended and then feed that into the replay feature to rewatch your game.
我没想到会这么早引入在线多人对战,但那个令人头疼的 bug 让我觉得有必要尽快提供一个替代方案。
I didn't expect to introduce online multiplayer this soon, but the headache bug felt like it warranted an urgent alternative.