1. 简介
2025 年 3 月 25 日，Google 推出了 Gemini 2.5。此次发布最令人难忘的一点是，它让所有人都能试用“高级编码”功能 [视频]：
在此 Codelab 中，您将学习如何“氛围编程 (vibe coding)”，从一个常见的提示开始，然后根据自己的喜好自定义一个简单的儿童应用。我们将在 p5.js 上测试该应用。最后，我们将这些更改推送到 Firebase Hosting。最令人惊喜的是，整个堆栈目前都是免费的！
学习内容
- 使用 Gemini 2.5 编写游戏应用。
- 在 p5js.org 上测试代码
- 如何迭代和优化提示 / 应用。
- 如何在 Firebase 上托管静态应用
注意，此 Codelab 使用 AI 生成的代码；这是不确定的，因此此 Codelab 包含指南，因为作者不知道您的输出。另请注意，请勿在生产环境中使用此代码！
2. 前提条件
本 Codelab 分为两个阶段：
- 仅限 Web 的开发。您可以在这里尽情享受乐趣，无需具备任何编码能力。为此，我们将使用 Gemini 界面 ( gemini.google.com) 和 p5.js。
- 本地编码环境。此时，您需要具备一定的编码 / 脚本编写技能，并安装和使用
npm/npx以及vscode或 IntelliJ 等本地编辑器。第二部分是可选的，只有在您想让亲朋好友通过移动设备或电脑玩您的应用时才需要完成。
第 1 阶段的唯一前提条件是浏览器和计算机（大屏幕会有所帮助）。如需了解第 2 阶段，请继续阅读。
Gemini 界面
gemini.google.com 是一个出色的平台，您可以在其中试用所有最新的 Gemini 模型，还可以创建自己的图片和视频！它与 Google 服务（例如 Google 地图、酒店/机票/评价）高度集成，是规划下一次假期的理想伴侣！
提示：如果您喜欢编码，不妨试试 AI Studio，它提供类似的界面，您可以在其中对 LLM 互动（例如创建图片）进行原型设计，并直接从页面获取 Python 代码！
p5.js
p5.js 是一个免费的开源 JavaScript 库，可让艺术家、设计师、教育工作者和任何其他人都能轻松进行创意编码。它基于 Processing 语言，可简化在 Web 浏览器中使用代码创建互动式视觉内容和互动式内容的过程。
本地编码 [可选]
如果您想让应用保持运行状态，则需要进行更多设置：
- 本地代码编辑器 ( Visual Studio Code、IntelliJ 等)
- 用于持久保存代码的 Git 账号 ( github / gitlab / bitbucket)。
npm本地安装，最好是在用户空间中（通过npx或同等技术）。
此外，我们稍后会设置 Firebase 账号。
我们还要求您具备一定的编码技能，例如：
- 能够安装
npm软件包 - 能够与文件系统互动（创建文件夹和文件）
- 能够与
git（git add、git commit、git push）互动。
如果您觉得上述任何内容令人生畏，请记住：LLM 在这方面可以为您提供很大帮助。您可以使用“Gemini 2.0 flash”或等效模型来获取建议。如果这仍然太难，您可以完全跳过第 2 阶段。第 1 阶段的奖励应该足够丰厚。
3. 让我们来创建第一个游戏吧！
打开 gemini.google.com，然后选择支持代码的模型，例如 2.5。此选项可能会因空闲情况、费用和日期而异。在撰写本文时，最佳选择是：
- Gemini 2.5 Flash（迭代速度更快）
- Gemini 2.5 Pro（输出效果更佳）。
如需详细了解我们的 Gemini 模型，请点击此处。
我们的第一个游戏提示
正如您从此视频中看到的，初始提示可以非常简单，例如：
Make me a captivating endless runner game. Key instructions on the screen. p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.
您可以随意自定义此提示：
- 中世纪 / 未来 / 赛博朋克设置
- 包含大量表情符号，还是包含某个特定表情符号？
- 您喜欢黄色或各种色调的紫色。
- 也许您的孩子喜欢独角兽、恐龙或宝可梦。
将提示粘贴到浏览器中后，您应该会看到 Gemini 在思考。没错，Gemini 2.5 是一个思考模型，因此它会开始执行多项任务，您可以观察到这些任务随时间的变化。您可以点击不断变化的下拉菜单来查看正在发生的情况，也可以直接等待结果：
最后，您应该会得到一个可正常运行的 JavaScript。
现在，您可以点击顶部的复制按钮：
在 p5.js 上测试游戏
现在可以测试游戏了！
- 打开 p5.js 编辑器：https://editor.p5js.org/
- 选择并删除现有的 sketch.js 代码。
- 粘贴您的代码
您的页面应如下所示：
最后，您可以按播放按钮。
现在，可能会出现两种情况：代码正常运行或运行失败。下面我们来根据这两种情况分别按照说明操作：
- 您的代码失败
- 您的代码首次尝试就成功运行！
在接下来的两个段落中，我们将了解如何管理这两种情况。
（情况 1）我的代码失败了！
如果您遇到此类错误，只需将其复制并粘贴到 Gemini 中即可。让他为您修复代码！
（情况 2）我的代码有效！
如果代码正常运行，您应该会在页面右端看到一个可视化游戏。
👏 恭喜，您正在运行首个 AI 游戏！
注意：虽然您拥有代码，但该应用仅在浏览器中运行。如果您想向家人和朋友展示该应用，则需要托管解决方案。幸运的是，我们为您提供了一个绝佳的选项！继续阅读。
现在，您可以开始下一章的学习了。
后续迭代
现在，请将您的代码保存在某个位置，以防您弄坏它。如果需要，您可以迭代一次。例如，作者非常喜欢超级马里奥的二段跳，因此您可以添加类似如下的内容：
The game is great, thanks! Please allow for my character to double jump.
您可以随意调整，不受任何限制！也许您想为更高的分数保留角色名称，或者随着时间的推移提高速度以增加难度，等等。英语是提示的限制！
提示：Gemini 通常只会提供您需要应用的更改（例如，这是函数 XYZ 的更改）。您可能需要设置提示，以便它为您提供完整的更新代码，例如
"Please give me the entire updated code, not just the changed function"
。这样一来，您就可以更轻松地剪切和粘贴内容。
注意事项
您可能需要为 Gemini 对话添加书签。也许您想将其重命名为“p5js my first game”，或者记下 Gemini 的永久链接（例如 https://gemini.google.com/app/abcdef123456789），以供日后使用。
4. 我们来在本地运行此代码
此时，您应该已完成以下操作：
- 一个打开的 Gemini 浏览器窗口，其中包含一些有效的代码。
- 包含可运行游戏的打开的 p5.js 浏览器窗口
- 安装了
npm的本地编码环境。
这是 Codelab 中较难的部分。需要具备一些基本的编码经验。
安装依赖项
如果您缺少 npm 和 node，最好的办法是通过某个版本管理器（例如 nvm）安装 npm。按照适用于您操作系统的安装说明进行操作。
我们还假设您使用的是编码 IDE。我们将在屏幕截图和示例中使用 Visual Studio Code，但您可以使用任何编辑器。
设置本地环境
此时，您可以创建自己的文件结构。
以下设置脚本仅作说明之用。您可以通过创建文件夹和文件来手动执行此操作：
# This works for Mac and Linux. For Windows, please use other tools. mkdir my-first-vibecoding-project/ cd my-first-vibecoding-project/ git init touch README.md PROMPT.md mkdir public/ cd public/ touch index.html sketch.js style.css git add . # Skipping quotes which can be tricky git commit -a -m committing_empty_skeleton
最终的文件夹结构应如下所示：
my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
├── index.html
├── sketch.js
└── style.css
您应该也能在此处找到该协议。
现在，打开您常用的代码编辑器（例如 code my-first-vibecoding-project/），然后开始将 editor.p5js.org 的内容粘贴到 public/ 下的 3 个文件中：
README.md← 您可以在此处放置 Gemini 对话永久链接，并在此处放置应用发布时的着陆页。PROMPT.md← 您可能需要在此处添加所有提示，并用 H2 段落分隔。如果您想说明自己为何给出了某个提示，可以将提示内容放在 3 个反引号 ( example) 中。- **
public/index.html** ← 在此处复制您的 HTML 代码 - **
public/sketch.js** ← 在此处复制您的 JS 代码 - **
public/style.css** ← 在此处复制您的 CSS 代码
公共文件夹可能包含其他资源，例如自定义 PNG。
5. 设置并部署到 Firebase
设置 Firebase（仅限首次）
确保在您的机器上安装了 npm。
在终端中，输入以下任一命令（两者均可）：
# to install on the machine (requires privilege) npm install -g firebase-tools # to install locally (low privilege needed but might need to repeat a few times) npm install firebase-tools
现在，您应该可以调用 firebase 命令了。如果您遇到问题，请参阅公开文档。
Firebase 初始化
在本部分中，我们将设置 Firebase 托管。这是一个非常简单的流程，但您可能需要一段时间才能在第一次熟悉它。
确保您位于包含文件的 public/ 目录的上一级目录中。相应列表（ls -al 或 dir）应显示如下内容：
$ ls PROMPT.md README.md public/
- [步骤 1] 在控制台上，输入：
firebase init
- 使用光标向下导航到“Hosting: ..”，然后依次输入空格键和 Enter 键。（为什么？由于这是一个多项选择题，您需要选择并前往下一页）
- [第 2 步] 现在，您可以选择现有项目（选项 1），也可以创建新项目（选项 2）：
- 注意：如果您有现有的 Cloud 项目，该项目可能不是 Firebase 项目。Firebase 项目是 GCP 项目的一个子集。您需要执行一些额外的步骤才能将它们转换为 Firebase 项目，这正是（选项 3）的用途。
- 如果您尚未确定，请使用“创建新项目”，并添加一些名称，例如“p5js-YOURNAME-YOURAPP”（例如“p5js-riccardo-tetris”）。
- [步骤 3]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - 按 ENTER 键。
- [第 4 步]
? What do you want to use as your public directory? (public) - 按 ENTER 键（我们故意设置了
public/）
- [第 5 步]
? Configure as a single-page app (rewrite all urls to /index.html)? No - 按 ENTER 键（否）
- [步骤 6]
? Set up automatic builds and deploys with GitHub? No - 按 ENTER - 否
- [步骤 7]
? File public/index.html already exists. Overwrite? (y/N) - 按 Enter 键（否）。
- 警告：这可能会导致错误；如果您覆盖它，新的 index.html 将与 p5js 不兼容！
如果一切正常，您应该会看到以下内容：
这些操作应已创建一些文件：
.firebaserc .gitignore firebase.json public/404.html
特别是，.firebaserc 应包含您的项目 ID，您可以使用以下代码以编程方式提取该 ID：cat .firebaserc | jq .projects.default -r
警告：请检查 index.html。如果该文件超过 16 行，并且/或者包含“firebase”一词，则说明您错误地覆盖了 p5js 文件。没问题，只需记得从 Git 或 p5js 编辑器中恢复旧的 index.html 即可。
本地测试
为了缩短反馈环路延迟时间，您可能需要先在本地尝试。
为此，您可以尝试使用 Firebase 团队提供的功能强大的 CLI 套件。例如：
$ firebase emulators:start
应在端口 5000 ( http://127.0.0.1:5000/) 上启动 Web 服务器，以便您在推送之前进行本地测试。
部署到 Firebase
现在，该输入最终命令了：
$ firebase deploy
这应该会触发多项操作。最后几行应如下所示：
$ firebase deploy [...] ✔ hosting[YOUR_PROJECT]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview Hosting URL: https://YOUR_PROJECT.web.app
这会为您提供托管网址。试试看！
如果部署成功，但您发现页面空白或部署损坏，可以尝试以下几种方法：
- 打开浏览器的“开发者工具”，找到错误，然后使用如下提示让 Gemini 帮助您修复该错误：
I've deployed the script correctly with Firebase, but I now see a blank page with this error: [ paste detailed JS console error ]
♾️ 迭代！
您可以根据需要多次重复这些步骤。您可以继续提示，直到对结果感到满意为止。
请务必注意以下几点：
- 在 Gemini > p5.js > Gemini 循环中，迭代循环比在 Gemini > 本地主机 > 部署到 Cloud Run > 在浏览器中测试应用（点击刷新）中快得多。
- 使用 Git 对提示和代码进行版本控制。您可能希望能够返回到提示 N 和代码 N。特别是，您需要对推送的每个
sketch.js进行 Git 提交，因为其中可能潜藏着未被发现的 bug。
请注意，部分游戏在键盘上运行良好，但在鼠标或移动设备上运行不佳。这是改进代码的好时机。
6. 提示技巧
以下是一些我创建过不少游戏后总结的提示。
对提示进行版本控制
您可能会发现原始提示中存在错误。拥有 git 版本。这里有几个代码路径：
- 如果您对生成的内容很满意，并想通过后续的子提示与 Gemini 进行迭代，那么将所有提示记录在某个位置可能会很有用（提示 1、2、3 - 3-shot 示例 1 - example2）。
- 如果您不太在意通过提示 1 创建的应用，则可能需要完善提示，舍弃代码，然后使用修改后的代码（提示 1 v1、提示 1 v2、提示 1 v3 等）重新开始。
当然，您也可以混用这两种方法。
Mobile 功能
根据您创建的游戏，您可能需要与用户进行一些互动。此互动是否需要键盘？还是只需点按屏幕（例如使用移动设备）即可使用？请务必在提示中明确说明这一点。您可能需要在键盘上创建一些按钮（请参阅我的 Tetris 3D 示例）。另请参阅 dungemoji 移动设备兼容性问题。
直接向 Gemini 反馈 JavaScript 错误 / 屏幕截图
由于 Gemini 无法查看您与 p5js 的互动，请务必将所有 JavaScript 错误粘贴到 Gemini 中。请注意，Gemini 是多模态的，因此如果您有界面更改（例如缩小标题或降低得分），您还可以附上游戏的屏幕截图！编码反馈从未如此有趣！
7. 恭喜！
🎉 恭喜您完成此 Codelab。
我们已经了解了使用 Gemini 创建游戏有多么容易，以及 Firebase 如何提供简单的托管解决方案来持久保存游戏并与他人分享。
所学内容
- 通过 Gemini 2.5 创建游戏。
- 部署到 Firebase
现在，是时候 👥 炫耀一下了！不妨在 LinkedIn 或 Twitter 上分享您的最新游戏 (your-project.web.app)，并添加 # 标签 #VibeCodeAGameWithGemini（或许还可以在 LinkedIn 上标记作者）？这样一来，我们就能知道此 Codelab 的吸引力如何，并可能会编写更多此类 Codelab！
我想要更多！
如果您需要更多资源，请查看以下游戏和提示：
- 周末使用 Gemini 2.5 和 p5.js 编写 5 款儿童游戏！本文将通过 6 个示例，引导您了解游戏氛围编程的思路。
- palladius/genai-googlecloud-scripts（包含约 10 个应用的代码和提示的 GitHub 代码库）：俄罗斯方块、吃豆人、四子棋，甚至还有一款 Rogue 克隆版，让您重温经典！此文件包含所有这些游戏的提示。选择您最喜欢的提示，对其进行调整，然后尽情享受音乐吧！
您可以创建的一些游戏示例：
最终的游戏可能如下所示：
- 3D 俄罗斯方块
- 语言游戏
- 恶意克隆
- 一款 Pac-Man 克隆游戏。
同样，英语是上限！
|
|
|
|
|
|
🎉 祝您编码愉快！