我用豆包 Seed-Evolving 手搓了《王国保卫战》：一款带动态叙事的硬核塔防！

大家好！我是瓜哥。前互联网技术副总裁，现在带队死磕 AI 编程。

最近咱国产大模型进度速度非常快，特别在我比较关注的 AI Coding 领域，GLM 5.3、KIMI K3 都获得大量的好评。还有个名气没那么响，但实测很顶的国产大模型：seed-2.1-pro-0915.

为了摸清这个模型的 Coding 能力，我决定玩一把硬的——用 Claude Code 搭载火山引擎的豆包大模型（seed-2.1-pro-0915），在本地从零复刻神作《王国保卫战》（Kingdom Rush）。全程零依赖打包工具，原生单页极速起跑。

今天就把整套开发过程、最头疼的 AI 美术切片驯化秘籍，以及如何用“战役黑匣子”接入动态叙事的架构完整复盘。

游戏的提示词模板与数据流方案，点个关注，你可以直接带走。

一、 撕掉玩具标签

1. 经典塔防的“硬骨头”究竟在哪

① 连贯战术要道与碰撞死角

很多 AI 生成的塔防 Demo，怪物走位经常断断续续，甚至斜穿草地。真正的塔防第一道门槛，就是必须有一条严丝合缝、充满战术纵深的曲折道路。

在本项目里，我将地图设计为 24 列 × 14 行的标准栅格。

整个行军路线是由拐点精确插值出的连续石板路，沿途还要错落排布王城要塞、蛮族营帐、高耸冷杉与青苔岩石。

为了防止玩家把塔建在马路正中央或者悬崖峭壁上，工程里建立了一套硬核的禁建区掩码：路径网格、王城占地、营地入口及自然装饰物，全部施加严格的几何碰撞剔除。

② 兵营哨兵拦截与防重叠分道算法

在《王国保卫战》的灵魂机制里，步兵营绝不是普通射击塔，而是“路障制造机”。

兵营本身不发射弓箭，而是在临近道路上派出两名皇家卫士驻守巡逻。当野蛮人冲过来时，卫士必须迎头阻挡，将敌人移速直接压制到 25%，并伴随刀剑相交的近战挥砍与盾击。

更致命的是同屏重叠问题。

第一次 AI 代码一旦刷出 20 只怪物，所有人会严格踩着同一个坐标点前进，最终在屏幕上缩成一个恶心的大黑团。

为此，调整了要求，AI 设计了一套横向微偏移算法（laneOffset）：敌人根据出场次序自动获得垂直于行军方向的偏移量。当队伍横向行进时，怪物在纵向错落分布；纵向行进时，在横向拉开战线。整支蛮族大军由此展现出真实军团开进的层次感。

// 敌人同屏防重叠横向微偏移计算const laneOffset = ((spawned * 17) % 15) - 7;const enemy = {  ...enemyTemplate,x: MAP.path[0].x * MAP.tile + MAP.tile / 2,y: MAP.path[0].y * MAP.tile + MAP.tile / 2,facing: -1,isBlocked: false,laneOffset: laneOffset,alive: true};

2. 零打包的原生前端工程手感

① 纯 ES Modules 与免编译秒开

我极为反感为了做一个轻量游戏就配上半天 Webpack、Vite、Node 依赖包的做法。这个项目完全基于原生 ES Modules 构建，模块职责很清楚：

• data.js 沉淀数值平衡与连续路径字典；

• art.js 负责精灵图贴图与程序化微动效；

• sound.js 管理高保真战斗音效与 BGM 缓冲池；

• game.js 驱动游戏状态机与战斗循环。

没有任何构建产物，本地开一个 Python 内置服务器，浏览器秒开，代码改完即刻刷新。

② 容器查询（Container Queries）全屏自适应

游戏如果固定在 800×600 的小方盒里，格局立刻跌入谷底。但在网页里做大屏拉伸，最怕的就是比例失真与像素模糊。

项目采用了现代 CSS 的 container-type: size 容器查询特性，将游戏核心画布严格锁定在 24:14 的黄金战术比例上：width: min(100cqw, calc(100cqh * (24 / 14)))。同时，渲染引擎在窗口缩放与全屏切换时，会实时读取屏幕物理像素与设备像素比（DPR），动态重设画布物理缓冲区（resizeCanvasBuffer）。无论是 13 寸笔记本还是 4K 外接屏，石砖纹理与角色边缘始终细腻锐利。

二、 突破美术瓶颈

1. 为什么 AI 随手画的游戏切片通常是“灾难”

① 边缘污染与不可用透视

这是许多想用 AI 做 2D 独立游戏的人最容易踩的坑。

直接对生图工具说“给我画一个中世纪防御塔”，出来的结果往往是一幅带黄昏天空、带杂乱草坪、带刺眼夕阳的完整风景画。

另一个毁灭性问题是透视错乱。

AI 第一张图画了个平视正面的木岗楼，第二张图画了个从天上往下俯视的大斜角石头塔，第三张图又画了个仰视角度的兽人。

把这几张图摆在同一个网格里，整个空间感瞬间崩塌。

② 风格漂移与元素违和

AI 绘画极易出现材质风格漂移。

如果不做严格的风格锚定，你让它画“兵营”，它可能生成写实油画风；画“萨满”，它给你来个日系赛博二次元；画“巨龙”，又变成了厚重的美漫写实怪物。不同素材放在一起，满屏都是廉价的拼贴感。

在本项目中，我的目标非常明确：必须是《王国保卫战》那种兼具线条轮廓感、手绘厚涂质感与奇幻微缩模型的质感。

2. 调优三板斧：驯化出神作级切片的美术管线

① 视角锁、白底锁与无损透明通道

要让生图模型输出“工业级可用切片”，必须在提示词里焊死三把几何锁：

1. 视角锁（Perspective Lock）：固定声明“Orthographic 45-degree angle top-down view”或“Isometric side-elevation”，杜绝任何广角透视畸变。

1. 纯白隔离锁（Pure White Isolation）：强约束“isolated on clean pure white background, zero shadow on canvas boundary”。纯白底对于高对比度角色轮廓是最完美的抠图基准，脚本一键就能生成无损 Alpha 透明通道。

1. 描边材质锁（Outline & Shading）：指定“clean black inked outlines, medieval fantasy comic book art style, rich flat shading”，用墨线勾边压住不同切片之间的形体关系。

② 资产原子化分层（地表/建筑/军团/Boss）

我将全套 20+ 个切片拆解成了清晰的原子矩阵：

• 环境地块：手绘泥土石子路、无缝温润草坪、三垛城墙与铁闸王城堡垒、蛮族兽皮前哨营帐。

• 三系两阶塔防：木质斥候岗楼 → 青石重弩楼；秘法符文石塔 → 悬浮紫晶奥术塔；原木步兵木寨 → 皇家金狮卫营。

• 敌方进攻军团：手持战斧的蛮族步兵、长矛重甲突骑兵、握白骨法杖的暗影萨满、体型魁梧的山岭巨魔。

• 最终 Boss 巨龙：展翼盘旋的远古红龙。

这里还发生过一个有趣的插曲：巨龙素材生成出来后，龙首面朝右侧喷火。而我们的战役路线是从右往左攻打城堡。如果直接贴进游戏，红龙就会一边倒退着飞向城堡，一边朝着自己的蛮族老家喷火，画面极度滑稽。好在有了统一的切片标准，我们只需在资产管线上对其做一次无损水平镜像翻转（Horizontal Flip），红龙瞬间回归怒吼扑翼、迎头扑向防线的凶悍姿态。

3. 【直接带走】高精游戏切片工业级提示词模板

下面这两套提示词是我在实战中经过多轮收敛沉淀下来的模版，你可以直接替换方括号内的核心实体词：

① 防御塔与古建场景生成提示词

[Role & Medium]:Game asset sprite sheet, isolated building, 2D mobile strategy game asset, Kingdom Rush art style.[Subject & Details]:[A 2-story medieval stone wizard tower, glowing purple arcane crystal hovering on the top roof, carved ancient magical runes on dark granite bricks, wooden arched door at base].[Perspective & Style]:Clean orthographic 45-degree isometric slight top-down view, crisp vector-like hand-drawn illustration, solid dark ink outlines, cel-shading, vibrant fantasy color palette.[Background & Export Constraint]:Strictly isolated on a plain pure solid white background (#FFFFFF), centered, full object fully visible, no scenery, no ground patch, no grass outside the building footprint, no vignetting, zero cast shadows bleeding outside the object.[Negative Prompt]:realistic photo, 3D render, blender cycles, blurry edges, messy sketch, cutoff, modern elements, cropped roof, complex background, gradient background, noise.

② 兵种角色与怪物切片生成提示词

[Role & Medium]:2D side-view combat character sprite, game asset, fantasy medieval comic art style.[Subject & Details]:[An armored northern barbarian warrior with horned iron helmet, holding two heavy iron battleaxes, dynamic running charging pose facing strictly towards the LEFT, wearing fur mantle and chainmail].[Art Style & Lighting]:Hand-drawn inked line-art, vibrant saturated colors, crisp cell-shading, readable silhouette at small icon scale, stylized mobile game aesthetic.[Isolation Constraint]:Completely isolated on a clean pure solid white background (#FFFFFF), full body in frame, no ground shadow, no dust effects, high contrast edges for easy transparency extraction.[Negative Prompt]:facing right, 3D realistic, photographic, extra limbs, deformed hands, noisy textures, cutoff weapon, dark background, complex scenery.

三、 注入游戏灵魂

1. 拒绝千篇一律的 Victory 与 Defeat

① 战役黑匣子（Flight Recorder）架构

很多号称“接了大模型”的游戏，做法极其生硬：要么在旁边开个聊天窗口让玩家跟 NPC 尬聊，要么在结算时不管战况如何，都让 AI 吐出一堆千篇一律的空洞鸡汤。

在本项目里，我设计了一个轻量级但极具深度的状态采集机制——战役黑匣子（Flight Recorder）。它在游戏底层主循环中全程静默运行，不打扰玩家操作，只专注于捕获整场战局的关键戏剧性瞬间：

• 谁拿了第一滴血（first_blood）？

• 终局是否在红血边缘惊险逆转（near_death_kill）？

• 王国城堡有没有被敌军突破过城门（castle_breached）？

• 盘旋的远古红龙是在什么时候被谁射落斩杀（dragon_slain）？

// 战役黑匣子关键事件监听捕获片段if (state.killed === 1 && !state.events.includes("first_blood")) {  state.events.push("first_blood");  state.slowMoRemaining = 1.2; // 触发首杀特写  sounds.play("sfx_first_blood");}if (p.target.id === "boss" && !state.events.includes("dragon_slain")) {  state.events.push("dragon_slain");  state.screenShake = 6.0; // 巨龙伏诛全屏震撼}

② 量化维度的多维埋点

除了定性事件，黑匣子还会精确统计防务数据：整场斩敌总数、关防残存耐久、拓取军资总额，以及各兵种的杀敌贡献（弓弩击杀数、秘法击杀数、步兵肉搏击杀数）。

当第三波战斗结束时，前端会瞬间打包出一份结构化的数据简报（Payload），成为大模型推理的唯一客观事实依据。

2. 1M 上下文驱动的动态中世纪史官

① 《左传》《史记》笔法与白话通释

拿到战役黑匣子后，我并没有让大模型输出大白话战报，而是将它设定为一位中世纪老史官。

Prompt 严格约束其采用四六步调的文言笔法。

• 玩家全场靠重弩精准点杀，史官会写下：“诸将列阵严整，引强弩于危楼，箭如骤雨，蛮骑莫敢前，伏尸累累”；

• 关防只剩 2 点血惊险绝杀，史官则会惊呼：“残垒孤城，狼烟冲霄，步卒引刃死守城阙，虽城阙崩陷数丈，赖诸军血战，方得转危为安”。

文言史记下方紧跟一句提纲挈领的现代大白话，文言文负责营造史诗感，白话文负责战术评价，体验感秒提升。

② 羊皮纸火漆令状与流式打字打动人心

为了将情绪价值拉满，UI 设计成泛黄做旧的中世纪羊皮纸卷轴，右上角压上红泥火漆印章——胜利盖金色“捷”字印，失败盖黑红“殇”字印。

战报文字以打字机动效伴随光标一字一字流式吐出，下方不仅罗列高光战役标签（如 【首杀夺魁】、【箭雨洗地】、【屠龙者】），还支持一键将完整的令状复制到剪贴板，方便玩家随时截图发圈炫耀。

3. 【直接带走】战报史官系统提示词与数据管道

① 史官角色扮演系统级 Prompt 模板

[System Role]:你是一位兼具古今通识的中世纪宫廷首席史官，负责为国王撰写当场塔防战役的纪事诏书。文风要求：1. 主文言文：仿《史记》《战国策》笔法，四六对仗，气势磅礴，字数控制在 120-180 字；2. 附白话释义：用一段幽默风趣、富有现代战术点评的白话文进行总结（60 字以内）；3. 高光标签：输出 3-4 个精炼的战况标签（如：【首杀夺魁】、【箭雨洗地】、【浴血残垒】）。[Input Data Schema]:- 战斗结果: {victory: boolean}- 歼敌总数: {killed: number}- 拓取军资: {totalEarned: number}- 关防残存: {lives: number} / 20- 防区击杀分布: 弓箭={archerKills}, 法师={mageKills}, 步兵={barracksKills}- 黑匣子大事件: {events: string[]} (包含 first_blood, dragon_slain, near_death_kill, castle_breached)[Rules & Constraints]:- 严禁空泛抒情，每一个形容词必须对应上述输入数据中的真实事件；- 若出现 dragon_slain，必须大书特书斩落远古巨龙的壮举；- 若出现 near_death_kill 且胜利，必须点出“残垣孤守、险胜还生”的紧迫感。

② 战况数据转换与前端轻量调用逻辑

// 前端战役黑匣子数据封包与调度逻辑function generateBattlePayload(state) {return {    victory: state.status === "victory",    killed: state.killed,    totalEarned: state.totalEarned,    lives: state.lives,    defenseContribution: {      archer: state.towerKills.archer,      mage: state.towerKills.mage,      barracks: state.towerKills.barracks    },    milestones: state.events  };}

四、 零门槛本地起跑

1. 一键运行体验实录

① 本地单命令秒级体验

整个项目没有复杂的数据库，也不依赖云端服务。代码拉到本地后，在根目录下执行 Python 内置服务器命令：

python3 -m http.server 8765

然后在浏览器打开 http://127.0.0.1:8765/index.html，即可直接运行。

② 全自动 5 秒倒计时出兵实战手感

进入游戏后没有任何阻挡视线的开始弹窗，初始直接发放 100 金币。蛮族营地入口悬浮着 Kingdom Rush 风格的波次勋章，底部波次按钮伴随呼吸光效进入 5 秒自动倒计时。

你可以在倒计时期间利用快捷键 [1][2][3] 快速规划建塔，也可以随时按下 [空格] 提前出兵。三波怪兽从先遣步兵到飞天巨龙波次交替推进，消灭全员后自动发放战役奖金并无缝开启下一波 5 秒倒计时，体验极其顺滑。

2. AI Coding 协作的边界思考

① 工具定位的克制：从“替身”到“重机枪”

在这场手搓《王国保卫战》的实战中，seed-2.1-pro-0915 扮演了极度高效的“重机枪”角色，负责高速倾泻精准的代码逻辑、算法切片与文字风格，省去了开发者大量的低级打字与样板代码时间。

人作为“重机枪手”，核心价值在于架构决策与审美把关。

② 独立开发者的造物窗口

大模型的持续进化，真正降低的不是偷懒的门槛，而是突破每个男孩少年时期执念的工程壁垒。

过去想独立做一款带手绘美术、带数值碰撞、带动态叙事的单机游戏，往往需要美术、程序、文案多人协作数周。而今天，只要你脑海中有足够清晰的架构与审美标准，一个人就能在本地完成过去一个小型工作室的工作量。

写在最后

记得刚上班那会儿，经常下班回家躺沙发上玩《王国保卫战》。那些小小的像素士兵在屏幕上挥剑防守、火枪手在箭塔顶端吹散硝烟的画面，是我对策略游戏最纯粹的记忆。

十多年后的今天，当看到自己在本地几百行干净的原生代码驱动下，远古红龙伴着喷射的烈焰扑向防线，老史官在羊皮纸上缓缓写下“巨龙伏诛，北境安定”的令状时，那种穿透屏幕的成就感依然滚烫。

技术工具不断更迭，模型参数日新月异，但动手创造的快乐与探索未知的野心，永远不会过时。

拿起你的终端与提示词，去做出属于你自己的下一款神作吧。