第3天。我要求在一天之内,在浏览器里做出一个完整的RPG游戏。
提示词#
“我想创建一款基于浏览器的RPG游戏,具备等轴测图形、角色自定义、回合制战斗、任务系统以及存档/读档功能。”
用一个提示词要求这么多东西,简直不可思议。RPG并不是一个小游戏。它涉及角色职业、物品栏系统、对话树、任务追踪、战斗机制、地图探索——其中任何一个单独拿出来都是一个完整的项目。我想看看如果我一口气把所有这些都要求出来,会发生什么。
构建过程#
Watchfire 接收了提示词并将其拆解为若干任务。package.json 中还留有第一个任务的痕迹,名字是:watchfire-0000-project-setup---initialize-nex。从项目结构来看,工作被拆分到各个核心系统中:使用 Next.js 和 Pixi.js 的项目初始化、类型定义、游戏状态管理、三个区域的地图数据(城镇、森林、地牢)、战斗引擎、道具和敌人数据库、对话系统、任务数据库、等轴测渲染,以及之上的所有 UI 组件。
仅组件列表就能说明构建了多少东西:CharacterCreation、CombatUI、DialogueBox、EquipmentPanel、GameHUD、GameMenu、Inventory、IsometricWorld、ItemTooltip、MainMenu、QuestLog、SaveLoadMenu、SettingsPanel、VictoryScreen。这是14个 React 组件,加上底层的游戏逻辑层。
我并没有坐在那里一步步引导每个环节。我回来的时候,一个可以玩的游戏已经等着我了。
我得到了什么#
这一次真的让我大吃一惊。

游戏自己起了名字。 “暗影领域:等轴测冒险”。我从来没有给它起名字。它自己选了一个,设计了一个带有艺术字的标题画面,并在主菜单上加了一个设置选项。深蓝色和金色的配色方案贯穿整个游戏。

角色创建是一个多步骤向导。 你输入名字,选择职业,然后在开始之前查看你的属性。它引导你经历三个界面,顶部有进度点。每个职业(战士、法师、盗贼)有不同的属性分配和初始装备。

职业选择卡片展示了每个选项的属性详情。战士拥有高血量和高力量。法师拥有高魔法和高法力值。盗贼属性均衡,速度较高。每个职业都有小图标和彩色属性条。这是相当精良的 UI 设计。

总览界面展示了你的初始装备。 一个名叫 John 的法师从木法杖、布制上衣、皮革裤子和破旧靴子开始游戏。你可以在确认之前看到所有基础属性。这种细节让游戏显得完整。

等轴测世界真的能用。 有一个带有建筑、道路和游走 NPC 的城镇。左上角的 HUD 显示你的 HP、MP 和等级。右上角的小地图显示当前位置"Willowbrook"。可以通过点击方格或使用 WASD 移动。

NPC 有对话树。 长老 Mira 迎接你:“啊,你终于醒来了!我是 Mira 长老,Willowbrook 村的守护者。” 对话框出现在屏幕底部,NPC 名字以金色高亮显示。点击或按 Enter 继续。

对话有分支。 Mira 长老询问你是否愿意帮助应对森林中的黑暗生物。你有两个选择:“我会帮助你"或"告诉我更多关于这些生物的事”。这不只是装饰性文字,它与任务系统相连接。

有一个完整的任务日志。 它通过标签页追踪进行中和已完成的任务。“新的开始"是主线任务,标注为主线故事。它显示目标(“与 Mira 长老交谈”)、奖励(金币和经验值)以及任务描述。UI 采用与其他界面一致的金色和深色风格。

暂停菜单内容全面。 继续游戏、物品栏、角色、任务日志、保存游戏、设置、主菜单。顶部显示你的角色名字、职业、等级、HP 和 MP。这不是随手拼凑的东西,有人认真考虑了信息层级。

战斗是有真实选项的回合制。 你与绿色史莱姆战斗。你和敌人都有血条。底部的行动栏提供五个选择:攻击、魔法、防御、道具、逃跑。每个选项都有颜色区分。战斗界面简洁易读。


胜利后获得经验值和金币。 击败绿色史莱姆后,你获得经验和货币。胜利界面清楚地显示你赚到了什么,并附有继续按钮。简单、令人满足的反馈循环。

物品栏系统有装备槽和背包。 有武器、头部、胸部、腿部、脚部和两个饰品槽。背包以网格形式展示物品。底部可以看到武器伤害和护甲防御属性。

道具有提示信息和操作选项。 将鼠标悬停在小型生命药水上会显示描述(“恢复30点HP”),并附有使用和取消按钮。这是一个真正的物品栏系统,不是占位符。

角色属性面板显示所有信息。 叠加在游戏世界上的完整属性表:名字、职业、等级、经验条、HP、MP 以及所有单项属性,还列出了你的已装备道具及其属性值。
关于 Bug#
这次我没有在初步测试之外记录具体的 Bug。游戏在第一次加载时就能运行,这相比第1天是一个很好的变化。NPC 互动、战斗流程和存档系统都运作正常,不需要我提交问题。尽管如此,它在边边角角仍然有些粗糙。等轴测移动有点呆板,战斗也可以增加更多敌人种类。但没有任何东西是坏掉的。
数据统计#
- 34个源文件,涵盖组件、游戏逻辑、钩子、类型和工具函数
- 3个地图区域(城镇、森林、地牢),包含等轴测瓦片数据
- 14个 React 组件,用于所有游戏 UI
- 6个游戏引擎模块(战斗、道具、敌人、对话、任务、等轴测渲染)
- 技术栈:Next.js 16 + Pixi.js 8 + React 19 + TypeScript
- 总实际操作时间: 大约20分钟的游玩和探索
试玩#
WASD 或方向键移动。点击 NPC 对话。I、C、Q 分别打开物品栏、角色和任务日志。ESC 打开菜单。F5 快速存档。
第3天总结#
这是让我不再把这个挑战当作新鲜玩意儿的项目。一款带有等轴测图形、三个角色职业、分支对话、任务系统、物品栏管理、装备槽、回合制战斗和持久化存档的回合制 RPG。运行在浏览器里。来自一个提示词。
我从来没有做过 RPG。我从来没有实现过等轴测渲染引擎。我从来没有设计过战斗系统、装备系统或对话树。对于其中任何一个单独的系统,我都不知道从哪里开始,更不用说把它们全部放在一起了。就算我能完成,这对我来说也将是一个耗时数月的项目。
这是一个完整的 RPG 吗?并不完全是。它有一个 RPG 的骨架。内容比较单薄,可能只有几次遭遇战,故事也是通用的奇幻设定。但所有系统都在那里,并且相互配合运作。你创建的角色会延续到战斗中,装备影响属性,任务追踪进度,存档在会话之间持久保存。架构是扎实的。
最让我印象深刻的是 UI 质量。金色搭配深色的配色方案、多步骤角色创建向导、属性条、带标签页的任务日志、物品栏网格——这些都不在我的提示词里。我要求的是系统,得到的是一个有设计感的体验。那是我即使有无限时间也无法独立完成的部分。我不是设计师。
构建这类东西的成本已经大幅降低。不是构建一款出色 RPG 的成本——那仍然需要多年的内容填充、平衡调整和打磨。但构建一个拥有真实系统的可运行 RPG 原型的成本?已经从数月缩短到数小时。
这是30天Vibe编程挑战的第3天。跟随我使用 AI 辅助编程在30天内发布30个项目。







