使用 Gemini 為兒童遊戲編寫 Vibe 程式碼，並透過 Firebase 發布！

1. 簡介

Google 於 2025 年 3 月 25 日推出 Gemini 2.5。這次發布最令人難忘的一點，就是讓所有人都能試用「進階程式碼」功能 [影片]：

a3d1de17f9fbf428.png

Gemini 2.5：只要一行提示，就能建立自己的恐龍遊戲

在本程式碼研究室中，您將瞭解如何「氛圍編碼」簡單的兒童應用程式，從常見提示開始，然後自訂成自己喜歡的樣子。我們會使用 p5.js 測試應用程式。最後，我們會將這些變更推送至 Firebase 託管。最令人驚豔的是，整個堆疊目前免費！

課程內容

  • 使用 Gemini 2.5 隨意編寫遊戲應用程式的程式碼。
  • 在 p5js.org 測試程式碼
  • 如何反覆測試及修正提示詞 / 應用程式。
  • 如何在 Firebase 託管靜態應用程式

af537073e37f086a.png

請注意，本程式碼研究室使用 AI 生成的程式碼，因此具有不確定性。由於作者無法預測輸出內容，本程式碼研究室僅提供指引。此外，請勿在正式環境中使用這段程式碼！

2. 先決條件

本程式碼研究室分為兩個階段：

  1. 僅限網頁開發。您可以在這裡盡情發揮創意，完全不需要程式設計能力。我們會使用 Gemini 使用者介面 ( gemini.google.com) 和 p5.js。
  2. 本機程式碼編寫環境。這時就需要一些程式碼 / 指令碼編寫技巧，以及安裝和使用 npm / npx 和本機編輯器，例如 vscode 或 IntelliJ 等。第二部分為選用步驟，只有在您想保留應用程式，讓親友透過行動裝置或電腦玩遊戲時才需要執行。

第 1 階段的唯一先決條件是瀏覽器和電腦 (大螢幕有助於作業)。如要瞭解第 2 階段，請繼續閱讀下文。

Gemini 使用者介面

gemini.google.com 是絕佳的平台，您可以在這裡試用所有最新的 Gemini 模型，還能建立自己的圖片和影片！這項功能整合了 Google 地圖、飯店/航班/評論等服務，是規劃下一次假期的理想幫手！

8d174c7e462cfd11.png

提示：如果您喜歡程式設計，不妨也試試 AI Studio。這個介面與 Gemini 類似，您可以在其中製作 LLM 互動的原型 (例如建立圖片)，並直接從頁面取得 Python 程式碼！

p5.js

p5.js 是免費的開放原始碼 JavaScript 程式庫，可讓藝術家、設計師、教育工作者和任何人都輕鬆進行創意編碼。這個程式庫以 Processing 語言為基礎，可簡化在網頁瀏覽器中，使用程式碼建立互動式視覺效果和互動式內容的程序。

ca1f12cbbedc76b9.png

當地編碼 [選填]

如要保留應用程式，必須進行更多設定：

此外，我們稍後會設定 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 模型，請參閱這篇文章。

8d174c7e462cfd11.png

第一個遊戲提示

如這部影片所示，初始提示可以很簡單，例如：

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 是思考模型，因此會開始執行多項工作，您可以觀察這些工作隨時間的變化。您可以點選變更中的下拉式選單查看進度，也可以直接等待結果：

1379f641db7b829d.png

最後，您應該會取得可正常運作的 JavaScript。

現在可以點選頂端的複製按鈕：

5b3750c38378acb8.png

在 p5.js 上測試遊戲

現在可以測試遊戲了！

頁面應如下所示：

bcbd2cf1ea825ae6.png

最後，按下「播放」按鈕即可。

現在有兩種情況：程式碼運作正常或失敗。請按照以下兩種情況的指示操作：

  1. 程式碼失敗
  2. 程式碼第一次就成功運作！

接下來的兩段會說明如何管理這兩種情況。

(案例 1) 我的程式碼失敗！

如果收到這類錯誤訊息，只要複製並貼到 Gemini 即可。讓他為您修正程式碼！

366759a4baacccc7.png

(案例 2) 我的程式碼可以運作！

如果程式碼正常運作，頁面右側會顯示遊戲畫面。

👏 恭喜，你已開始執行第一個 AI 遊戲！

da962547fd6dc5f9.png

注意：取得程式碼後，應用程式只能在瀏覽器中運作。如要向親友展示應用程式，您需要代管解決方案。幸好我們為你準備了絕佳選擇！繼續閱讀。

現在可以進入下一個章節了。

進一步疊代

現在請將程式碼儲存在某處，以免損毀。如要，可以迭代一次。舉例來說，作者很喜歡超級瑪利歐的二段跳，因此可以加入類似這樣的內容：

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 的本機程式設計環境。

這是本程式碼研究室中較難的部分。您必須具備基本程式設計經驗。

安裝依附元件

如果缺少 npm 和 node，建議透過版本管理工具 (例如 nvm) 安裝 npm。請按照作業系統的安裝說明操作。

我們也假設您使用程式碼 IDE。我們會在螢幕截圖和範例中使用 Visual Studio 程式碼，但任何程式碼都適用。

設定本機環境

此時您可以建立自己的檔案結構。

以下提供設定指令碼，僅供參考。您可以手動建立資料夾和檔案，方法如下：

# 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 個反引號括住提示 ( 範例)。
  • **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

dc4baa436d63efac.png

  • 使用游標向下導覽至「Hosting: ..」，然後輸入 SPACE 和 ENTER。(原因為何？由於這是多選題，您必須選取並前往下一個頁面)
  • [步驟 2] 現在您可以選擇現有專案 (選項 1) 或建立新專案 (選項 2)：

955ab96f94b97b28.png

  • 注意：如果您目前擁有 Cloud 專案，該專案可能不是 Firebase 專案。Firebase 專案是 GCP 專案的子集。您必須執行其他作業，才能將其設為 Firebase 專案，這就是選項 3 的用途。
  • 如果尚未決定，請使用「建立新專案」，並新增類似「p5js-YOURNAME-YOURAPP」的名稱 (例如「p5js-riccardo-tetris」)。

9fb1e7c9f7d68f25.png

  • [步驟 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
  • 按下 Enter 鍵。

30d2cda68c45befc.png

  • [步驟 4] ? What do you want to use as your public directory? (public)
  • 按下 ENTER 鍵 (我們刻意設定 public/)

54bcc6fe2dd0e14e.png

  • [步驟 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
  • 按下 ENTER 鍵 (否)

af930401d3775c.png

  • [步驟 6] ? Set up automatic builds and deploys with GitHub? No
  • 按下 ENTER 鍵 - NO

81e017d4e3a5f7e6.png

  • [步驟 7] ? File public/index.html already exists. Overwrite? (y/N)
  • 按下 Enter 鍵 (否)。
  • 警告：這可能會導致錯誤；如果您覆寫這個檔案，新的 index.html 將無法與 p5js 相容！

如果一切正常，您應該會看到以下內容：

98ff444361607aae.png

這些動作應該會建立幾個檔案：

.firebaserc
.gitignore
firebase.json
public/404.html

具體來說，.firebaserc 應包含您的專案 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/ ) 上啟動網路伺服器，方便您在推送前進行本機測試。

部署至 Firebase

現在執行最後一個指令：

$ firebase deploy

be5c455df84ac20.png

這應該會觸發多項動作。最後幾行應如下所示：

$ 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 ]

♾️ 反覆運算！

您可以視需要重複這些步驟。你可以繼續輸入提示，直到對結果滿意為止。

99420f90bf14d04d.png

請注意以下幾點：

  1. 與 Gemini > 本機主機 > 部署至 Cloud Run > 在瀏覽器上測試應用程式 (按下重新整理) 相比，Gemini > p5.js > Gemini 迴圈的疊代迴圈速度快得多。
  2. 使用 Git 為提示和程式碼建立版本。您可能想返回提示 N 和程式碼 N。特別是您要推送的每個 sketch.js 都應進行 Git 提交，因為錯誤可能潛藏在其中，未被偵測到。

請注意，部分遊戲適合使用鍵盤操作，但不適合使用滑鼠或輕觸手機螢幕操作。這是改善程式碼的絕佳時機。

6. 提示詞訣竅

以下是我們從製作多款遊戲中歸納出的幾項訣竅。

管理提示版本

您可能會發現原始提示有誤。擁有 git 版本。這裡有幾條程式碼路徑：

  1. 如果喜歡 Gemini 生成的內容，並想使用後續的子提示詞進行疊代，或許可以將所有提示詞記錄在某處 (提示詞 1、2、3 - 3-shot 範例 1 - example2)。
  2. 如果您不重視由提示 1 建立的應用程式，可以改為完善提示、捨棄程式碼，然後使用修改後的程式碼重新啟動 (提示 1 v1、提示 1 v2、提示 1 v3 等)。

當然，您也可以混合使用這兩種方法。

行動功能

視您建立的遊戲而定，您可能需要與使用者互動。這項互動是否需要鍵盤？還是只要輕觸螢幕 (例如使用行動裝置) 即可使用？請務必在提示中明確說明這點。你可能需要在鍵盤上建立一些按鈕 (請參閱我的 Tetris 3D 範例)。另請參閱dungemoji，瞭解行動裝置相容性問題。

直接在 Gemini 中提供 JavaScript 錯誤 / 螢幕截圖的意見回饋

由於 Gemini 無法查看您與 p5js 的互動，請務必將所有 JavaScript 錯誤貼到 Gemini。請注意，Gemini 是多模態模型，因此如果 UI 有所變更 (例如縮小標題或降低分數)，您也可以附上遊戲的螢幕截圖！程式碼意見回饋從未如此有趣！

b0bacf73c058c4e5.png

7. 恭喜！

🎉 恭喜您完成本程式碼研究室。

我們已瞭解如何使用 Gemini 輕鬆建立遊戲，以及 Firebase 如何提供簡單的代管解決方案，方便您儲存遊戲並與他人分享。

b730ed7192ac3d1c.png

涵蓋內容

  • 透過 Gemini 2.5 建立遊戲。
  • 部署至 Firebase

現在可以 👥 炫耀一下！何不在 LinkedIn 或 Twitter 上分享你的最新遊戲 (your-project.web.app)，並加上主題標記 #VibeCodeAGameWithGemini (或許還可以在 LinkedIn 上標記作者)？這有助於我們瞭解這項程式碼研究室是否吸引人，並可能編寫更多這類內容！

我想要更多！

如需其他資源，請參閱下列遊戲和提示：

你可以建立的遊戲範例：

最終遊戲可能如下所示：

  • 3D 俄羅斯方塊
  • 語言遊戲
  • 惡意副本
  • Pacman 副本。

同樣地，只能使用英文！

🎉 祝您編寫程式一切順利！