关于此 Codelab
1. 简介
2025 年 3 月 25 日，Google 发布了 Gemini 2.5。此次发布最令人难忘的一点是，所有人都可以试用“高级编码”功能 [视频]：
在此 Codelab 中，您将学习如何通过“氛围编程”来构建一个简单的儿童应用，首先从一个常见的提示开始，然后根据自己的喜好进行自定义。我们将在 p5.js 上测试该应用。最后，我们会将这些更改推送到 Firebase Hosting。最棒的是，整个堆栈目前免费！
学习内容
- 使用 Gemini 2.5 通过 Vibe 编码方式构建游戏应用。
- 在 p5js.org 上测试代码
- 如何迭代和优化问题 / 应用。
- 如何在 Firebase 上托管静态应用
注意，此 Codelab 使用 AI 生成的代码；由于此类代码是非确定性的，因此此 Codelab 包含指南，因为作者无法预知您的输出。此外，请勿在生产环境中使用此代码！
如果您喜欢此 Codelab，请务必查看 🔥 Firebase Studio，它提供简洁且集成的编程体验！
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 语言，简化了在网络浏览器中使用代码创建交互式视觉内容和交互式内容的流程。
本地编码 [可选]
如果您想使应用持久化，则需要进行更多设置：
- 本地代码编辑器（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 Chat 永久链接，并在应用推出时在此处放置其着陆页。PROMPT.md← 您可以在此处添加所有提示，并以 H2 段落分隔。如果您想说明为何给出特定问题，可以将问题括在 3 个反引号中（示例）。- **
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 Hosting。这是一个非常简单的流程，但首次使用时可能需要一段时间才能熟悉。
确保您位于包含文件的 public/ 目录的上一级目录中。列表（ls -al 或 dir）应如下所示：
$ ls PROMPT.md README.md public/
- [第 1 步] 在控制台中，输入：
firebase init
- 使用光标向下移动到“Hosting: ..”，然后输入 SPACE 和 ENTER。（为什么？由于这是多选题，因此您需要同时选择并前往下一页）
- [第 2 步] 现在，您可以选择现有项目（选项 1）或创建新项目（选项 2）：
- 注意：如果您已有 Cloud 项目，该项目可能不是 Firebase 项目。Firebase 项目是 GCP 项目的一部分。您需要执行一些额外的步骤才能将其转换为 Firebase 项目，而 (option 3) 就是为此而设计的。
- 如果尚未确定，请使用“创建新项目”，然后添加一些名称，例如“p5js-YOURNAME-YOURAPP”（例如“p5js-riccardo-tetris”）。
- [step 3]
What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris) - 按 Enter 键。
- [step 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 - 否
- [step 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 > 本地主机 > 部署到云端运行 > 在浏览器中测试应用（点击刷新）相比，Gemini > p5.js > Gemini 循环的迭代速度要快得多。
- 使用 git 为提示和代码设置版本。您可能希望能够返回提示 N 和代码 N。特别要注意，您需要对推送的每个
sketch.js进行 Git 提交，因为其中可能潜藏着未检测到的 bug。
请注意，某些游戏适合使用键盘，但不适合使用鼠标或在手机上轻触。现在正是改进代码的好时机。
6. 提示技巧
以下是一些已创作过大量游戏的创作者总结的技巧。
对问题进行版本控制
您可能会发现原始问题有误。具有 git 版本。这里有几个代码路径：
- 如果您喜欢看到的结果，并希望使用 Gemini 和后续子问题进行迭代，不妨在某个位置跟踪所有这些内容（问题 1、2、3 - 3 张照片示例 1 - example2）。
- 如果您不重视由 prompt1 创建的应用，则可以改进提示，舍弃代码，然后使用修改后的代码重新开始（prompt1 v1、prompt1 v2、prompt1 v3 等）
当然，您也可以混合使用这两种方法。
移动功能
根据您创建的游戏，您可能需要与用户进行一些互动。此互动是否需要键盘？或者，只需点按屏幕（例如使用移动设备）即可使用？请务必在提示中明确说明这一点。您可能需要在键盘上创建一些按钮（请参阅我的 Tetris 3D 示例）。另请参阅dungemoji 移动设备兼容性问题。
直接在 Gemini 上反馈 JavaScript 错误 / 屏幕截图
由于 Gemini 无法看到您与 p5js 的互动，因此请务必将所有 Javascript 错误粘贴到 Gemini 中。请注意，Gemini 是多模式的，因此，如果您对界面进行了更改（例如缩小标题或降低得分），还可以附上游戏的屏幕截图！编码反馈从未如此有趣！
7. 恭喜！
🎉 恭喜您完成此 Codelab。
我们已经了解了如何使用 Gemini 轻松创建游戏，以及 Firebase 如何提供简单的托管解决方案来保留游戏并与他人分享。
所学内容
- 通过 Gemini 2.5 创建游戏。
- 部署到 Firebase
现在，是时候👥炫耀一下了！您为什么不在 LinkedIn 或 Twitter 上使用 #VibeCodeAGameWithGemini 标签分享您的最新游戏 (your-project.web.app)（并在 LinkedIn 上为作者添加链接）？这样，我们就可以了解此 Codelab 的吸引力，并可能编写更多此类 Codelab！
我想要更多！
如果您需要更多资源，请查看以下游戏和提示：
- 利用 Gemini 2.5 和 p5.js 在周末内编写五款儿童游戏！本文将通过 6 个示例引导您了解编写游戏氛围代码的思维过程。
- palladius/genai-googlecloud-scripts（包含约 10 款应用的 GitHub 代码库 - 代码和提示）：俄罗斯方块、吃豆人、连接四人，甚至还有一个适合怀旧者的 Rogue 克隆！其中包含所有这些游戏的提示。选择您喜欢的歌曲，根据提示调整歌词，然后尽情享受音乐吧！
如果您觉得今天所做的太过繁琐，还可以试试 🔥 Firebase Studio，其中的“想法”>“问题”>“代码”>“应用”循环全部包含在一个浏览器窗口中。
您可以创建以下一些示例游戏：
最终游戏可能如下所示：
- 3D 俄罗斯方块
- 语言游戏
- 恶意克隆
- 一个 Pacman 克隆。
再次提醒，只能使用英语！
|
|
|
|
|
|
🎉 祝编码愉快！