Claude Code实战:搜打撤小游戏40分钟开发教程
用 Claude Code 40 分钟构建了一款“搜打撤”小游戏
最近 Claude Code 升级到 Opus 4.8,新增了 dynamic workflow 功能。碰到新特性总想立刻上手,正好找个项目验证实际效果。
考虑再三,选择了「搜打撤」——Search → Strike → Extract,即撤离型射击玩法。这类游戏规则清晰、复杂度适中,很适合用来测试新工具的极限。
起因
初始指令仅一句话
# 切换到 ultracode 模式,开启 dynamic workflow
/effort ultracode
# 使用 goal 设定目标
/goal 请自行设计并完成一个 Web 端的“搜打撤”2D 游戏,要求可玩性高、功能完整,具备小游戏平台上架水准
40 分钟后游戏便开发完毕
40 分钟内发生了什么
所谓 40 分钟,指的是从空文件夹到第一个能在浏览器中完整跑完一局的版本。后续的美术重制、双语支持、世界观包装均是在这个雏形上叠加的。初版一次性成型即包含 4755 行 代码。
大致节奏如下:
先搭骨架。它率先构建了状态机与渲染循环:开场 → 基地 → 配装 → 部署 → 局内 → 结算,让整个游戏的“外壳”先运转起来,再逐步填充细节。
再实现“打”。敌人 AI 是最令人忐忑的部分,结果它直接采用了一套四态状态机:patrol(巡逻)→ alert(侦测到动静后探查)→ combat(开火)→ search(丢失目标后前往最后已知位置搜索一圈再放弃)。配套的机制包括视线射线检测(LOS raycast)和听觉系统——你开枪后,附近敌人真的会听到并循声而来。寻路算法用的是 A*。这些全部是它自主添加的,无需逐条指令。
然后是“搜”与“撤”。容器需要长按搜刮,伴有进度条;撤离点在地图上标记为绿色 ▲,站进去撑过倒计时即可。装备生命周期也设计到位:部署时从仓库扣除,撤离成功返还,死亡则永久丢失——还贴心地配了一套“白嫖”免费装备“Husk Dive”作为保底,但会收取战利品税,避免无风险刷取。
最后跑测试。node tools/smoke.js 会将 DOM / canvas / localStorage 全部模拟,以无头方式运行:地图生成、完整战斗、搜刮、撤离、死亡、经济系统、所有 UI 界面、移动端触控 HUD、损坏存档恢复,外加一个 20 局的压力测试。一夜之间的产物,自带回归测试。
几个令人惊叹的细节
回看代码,有几个方面超出了预期:
全部美术由代码生成。没有任何 PNG 文件。js/sprites.js 一个文件就包含了所有视觉呈现——角色、敌人、枪械、容器、图标,全部在运行时通过 Canvas 绘制。后来想换风格,直接让它将整套设计改为「螃蟹(Clawd)+ 珊瑚」主题,修改一个文件便全局生效。
音效通过合成实现。使用 Web Audio API 的振荡器实时生成枪声、脚步声、提示音,无需任何音频文件。同时正确应对了浏览器的自动播放策略——首次交互才解锁音轨,切换标签页后自动恢复。
地图基于种子 RNG(mulberry32)生成。可复现的程序化地图,每个站点设有三档风险等级。
移动端真正可玩,并非简单缩放凑数。左摇杆移动、右摇杆瞄准并开火,屏幕按钮控制冲刺/搜刮/换弹/治疗/换枪/背包;HUD 还会避开刘海屏和底部 Home 条(safe-area)。键鼠操作时会自动切换回桌面模式,触摸操作又切回移动模式——这种细节它都考虑到了。
中英双语,可实时切换。所有文案集中在 js/i18n.js,跟随浏览器语言设置,菜单中点击 EN / 中 立即切换并记住偏好。新增一门语言只需在目录中追加对应的条目。
甚至顺手构建了世界观。收尾阶段我让它为游戏包装一个故事——「珊瑚潮」:大白化之后海水淹没了旧世界,活珊瑚「绽放」唤醒了蟹群,玩家扮演“潮行者”,在退潮时下潜废墟,赶在涨潮封口前带着战利品上浮。亮点是它只换皮不动引擎——枪械改为旧世界打捞物、局时变为上涨的潮水、还为商人「海螺」增加了契约任务线——零引擎改动。
数据汇总
| 总代码量 | 6084 行(HTML/CSS/JS) |
| 第三方依赖 | 0 |
| 美术 / 音频素材文件 | 0(全程序化 + 合成) |
| 构建步骤 | 0(双击 index.html 即玩) |
| 平台 | 桌面 + 手机 |
| 语言 | English / 简体中文 |
| 自带测试 | 无头烟雾测试,覆盖 20 局压力测试 |
几点体会
当前大模型的能力已相当强大——从一句指令到浏览器可玩的小游戏,仅用 40 分钟,全程无需人工干预。
dynamic workflow 的实际体验令人满意——它能将目标拆分为任务,根据任务分配 agent,大任务分解为小任务,小任务由 subagent 并行处理,并依据任务复杂程度为 subagent 配置不同的模型。
目前正在逐步淘汰此前沉淀下来的工作流。模型已经能够考虑得相当周全,后续的重点将集中在约束条件与边界制定上。


