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

還剩 29 分鐘

程式碼研究室簡介

上次更新時間：5月 13, 2025

作者：Riccardo Carlesso

1. 簡介

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

在本程式碼研究室中，您將瞭解「vibe coding」這個簡單的兒童應用程式，從常見提示開始，然後依個人喜好自訂。我們將在 p5.js 上測試應用程式。最後，我們會將這些變更推送至 Firebase 託管。最棒的是，整個堆疊目前都是免費！

課程內容

使用 Gemini 2.5 為遊戲應用程式編寫 Vibe 程式碼。
在 p5js.org 上測試程式碼
如何迭代及精進提示 / 應用程式。
如何在 Firebase 上代管靜態應用程式

請注意，本程式碼研究室使用 AI 產生的程式碼，這類程式碼不具決定性，因此本程式碼研究室會提供指南，因為作者無法得知您的輸出內容。此外，請勿在正式環境中使用此程式碼！

如果您喜歡這個程式碼研究室，請務必試試 🔥 Firebase Studio，這項工具提供簡潔且整合的程式碼編寫體驗！

2. 必要條件

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

僅限網頁版開發。這裡將帶給您最有趣的體驗，而且無須具備程式設計技能。我們會使用 Gemini UI ( gemini.google.com) 和 p5.js。
本機程式碼環境。這需要一些程式碼 / 指令碼技能，以及安裝及使用 npm / npx 和本機編輯器，例如 vscode 或 IntelliJ 等。這部分為選用步驟，只有在您想讓朋友或家人透過行動裝置或電腦遊玩應用程式時，才需要執行這部分。

進行第 1 階段時，唯一的必要條件就是瀏覽器和電腦 (大螢幕有助於完成)。請繼續閱讀有關第 2 階段的內容。

Gemini UI

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 程式碼。
貼上您的程式碼

您的頁面應如下所示：

最後，請按下「PLAY」按鈕。

接下來可能會發生兩種情況：程式碼成功或失敗。請根據兩種情況按照指示操作：

程式碼失敗
程式碼在第一次嘗試時就運作了！

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

(案例 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 Chat 加入書籤。您可以將名稱改為「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 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 託管。這項流程非常簡單，但您可能需要花點時間熟悉。

請確認您位於內含檔案的 public/ 目錄上一層目錄。清單 (ls -al 或 dir) 應如下所示：

$ ls 
PROMPT.md
README.md
public/

[步驟 1] 在控制台輸入：firebase init

使用游標向下移動至「代管：..」，然後輸入 空格鍵，再按 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，您可以透過程式碼提取以下內容：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

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

$ 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 提交，因為其中可能會潛藏未偵測到的錯誤。

請注意，有些遊戲雖然可搭配鍵盤順利運作，但無法搭配滑鼠或輕觸手機操作。這正是改善程式碼的好時機。

6. 提示訣竅

以下是我們在開發多款遊戲後的幾項訣竅。

管理提示版本

你可能會發現原始提示有錯誤，git 版本。以下是幾個程式碼路徑：

如果您喜歡看到的結果，並想透過 gemini 與後續子提示進行疊代，建議您將這些提示記錄下來 (提示 1、2、3 - 3 張相片範例 1 - example2)。
如果您不太在意由 prompt1 建立的應用程式，不妨改為完善提示，丟棄程式碼，然後使用修改過的程式碼重新開始 (prompt 1 v1、prompt1 v2、prompt1 v3 等)

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

行動裝置功能

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

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

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

7. 恭喜！

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

我們已瞭解使用 Gemini 建立遊戲有多麼簡單，以及 Firebase 如何提供簡單的代管解決方案，讓您能持續保留遊戲並與他人分享。

涵蓋內容

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

歡迎大聲說出來！為什麼不在 LinkedIn 或 Twitter 上使用主題標記 #VibeCodeAGameWithGemini 分享最新遊戲 (your-project.web.app)？您也可以在 LinkedIn 上標記作者。這有助我們瞭解這個程式碼研究室的吸引力，並可能因此撰寫更多這類內容！

我想要更多！

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

運用 Gemini 2.5 和 p5.js，在週末內編寫五款兒童遊戲！本文將透過 6 個範例，引導您瞭解如何為遊戲編寫 Vibe 程式碼。
palladius/genai-googlecloud-scripts (GitHub 存放區，內含約 10 個應用程式 - 程式碼和提示)：俄羅斯方塊、吃豆人、連連看，甚至是懷舊派的Rogue 克隆！這會包含所有遊戲的提示。選擇你最喜歡的音樂，調整提示，盡情享受吧！

如果您覺得今天的作業太費力，也可以試試 🔥 Firebase Studio，這個工具會將想法 > 提示 > 程式碼 > 應用程式循環，全部整合在單一瀏覽器視窗中。

您可以建立以下幾種遊戲範例：

最終遊戲可能會像這樣：

3D 俄羅斯方塊
語言遊戲
不當的本機副本
一個吃豆人遊戲的複製品。

再次提醒，英文是唯一的限制！

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

回報錯誤