用 AI 快速原型化复古地牢游戏

咬一口清爽的冷西瓜（因为现在是东京的夏天，我超喜欢！），让我给你讲讲我们这个小团队如何把一个疯狂的想法变成了一个活生生的网页游戏。

如果你最近几年参加过 Google I/O 大会，你可能记得 Adventure——这个虚拟会议技术曾在疫情期间为谷歌的重大活动提供支撑。它庞大、插图精美、充满协作性。但它也很沉重、稍纵即逝，而且需要一大批人工主持者。

几个月前，我和 Tom 开始问自己一个问题：如果我们重新想象 Adventure 会怎样？与其做一个一次性的会议，我们何不打造一个舒适、复古的持久世界，通过"vibe 编码"和游戏玩法而不是干巴巴的文档，来教开发者生成式 AI 的原理？

这就是 AIventure 的灵感。下面就是我们实际构建它的故事。

原型设计

每个好游戏都始于原型。对于 AIventure，我们没有一开始就写复杂的引擎代码。我们先在 Gemini 里打磨概念。

我们想要一个分割的 UI 布局：用高质量的前端框架（Angular）来管理 UI 面板和布局，外面包裹一个由 Phaser.JS 驱动的复古画布作为真正的游戏引擎。这和我们之前的 I/O demo "Living Canvas" 采用的方案一样。

我们先用各种风格建立了一个简单的教育性益智游戏。最终我们选择了自上而下的复古地牢方案，因为它就是适合我们想要的那种"氛围"。就在这时，Tom 提出了一个妙主意：借鉴他之前项目"Adventure"的精神和美学，给这个世界赋予统一的身份。

截图：Gemini Canvas 中的初期原型

一旦我们确认了基础逻辑可行，Tom 和我开始头脑风暴更高级的益智机制。我们不想让 AI 只是充当一个锁和钥匙的机制；我们想展示现代 LLM 的神奇之处。

这导致了我们最喜欢的两个创意：

Vibe Coding Room：我们想向玩家介绍 AI 辅助的 UI 设计概念。在这个房间里，游戏打开了一个 iFrame 标签页。玩家给出提示，比如"为这只鸡建一个待办事项应用，只有吃和睡觉两个按钮"。AI 动态构建一个网页，玩家可以立即看到他们的代码，并在游戏环境内更新它。

Agent Puzzle：我们引入了一个小机器人 NPC 角色，它可以接受自然语言指令并在 Phaser 网格世界内执行。如果玩家说"去翻动开关"，模型就会使用工具调用和推理能力把指令分解成具体的、一步步的游戏动作。

技术探索

在我们最初的构建和测试阶段，我们依赖云端点——特别是通过 Gemini API 将提示请求推给 Gemini 模型来处理玩家命令和代码生成。效果完美无缺，但我们想突破现代网络应用的界限。我们希望这个游戏完全自包含且易于访问。

我们开始用 Gemma 4 模型测试益智游戏。我们试验了不同的模型大小（E2B 和 E4B）和框架，包括 Ollama、LM Studio、Transformers 和 Vertex AI，跟踪模型在函数调用和 Agent 工作流方面的表现。

本地部署

最后一块拼图是部署。我们如何在 Google Developers 网站上与数百万开发者分享这个 AI 驱动的游戏，而不强制他们配置云后端架构或输入私有 API 密钥？

答案在于在用户的浏览器内本地运行模型。

我们使用了 MediaPipe 和 LiteRT 团队预转换的格式，直接从网站界面托管和分发模型。通过利用客户端网络技术，整个体验在你的机器上本地运行。当玩家提示 NPC 或在游戏中写代码时，推理完全发生在客户端。前端通过一个简单的事件总线直接把请求路由给浏览器加载的模型。

对于在家探索源代码的开发者，我们构建了切换开关，所以你可以轻松地把同一游戏循环指向本地托管的 LM Studio 端点或 Vertex AI！

除了我们当前的益智游戏，我们还在探索 Gemma 的多模态能力。虽然这项工作目前仍在进行中，你可以通过克隆我们的 GitHub 仓库来自己试验。

构建 AIventure 是一次用旧学派游戏设计与现代客户端 AI 相融合的旅程。看到一个复古游戏与本地开源 LLM 对话、在地牢益智中进行 vibe 编码，对我们来说仍然像魔法一样。

我们已经发布了演示版本，其中还有开发者档案徽章可以在整个过程中解锁。如果你想查看解决方案、检查我们的完整架构或浏览我们的提示词，你可以在这里探索官方页面：

👉 查看 AIventure 解决方案

拿起你的剑，打开你的控制台，开心地构建吧！ 🍉🎮