階段四：做一個網頁小遊戲

約 30～40 分鐘。用 Node.js 建立 React 專案，請 AI 寫一個小遊戲，在瀏覽器裡玩。下一個階段由老師依課程安排。

需要：模組一已安裝 Node.js，版本 22.12 以上（或 20.19 以上的 20 版）。先在終端機執行 node --version 確認。 版本太舊時，Windows 執行 winget upgrade --id OpenJS.NodeJS.LTS -e，macOS 執行 brew upgrade node，再重新開啟終端機。 若顯示找不到已安裝的套件（Node.js 當初不是用 winget／Homebrew 安裝的），改用 winget install --id OpenJS.NodeJS.LTS -e 或 brew install node。

---

Step 1：建立空資料夾並開啟

在「文件」裡新增一個空資料夾 my-game，在 Antigravity IDE 選「檔案 → 開啟資料夾」（File → Open Folder）開啟它，再開啟 Antigravity IDE 的 AI 面板。

AI 只能在目前開啟的資料夾裡工作，所以要先開好資料夾。

Step 2：請 AI 建立專案並寫遊戲

對 AI 說：

在這個資料夾建立 Vite + React 專案，做一個「記憶翻牌」遊戲：
16 張牌、翻到相同的兩張就消除，顯示步數和計時，
全部消除後顯示「完成」和重新開始按鈕，介面用中文。
完成後幫我啟動開發伺服器，告訴我網址。

也可以把「記憶翻牌」換成「打地鼠」、「貪吃蛇」、「井字遊戲」等你想玩的遊戲。

Step 3：自己玩一輪，檢查 AI 說的「完成」

用瀏覽器打開 AI 給的網址（通常是 http://localhost:5173）。

AI 說「遊戲做好了」，不代表真的沒問題。 自己完整玩一輪，逐項確認：

• ☐ 翻到相同的兩張牌，會不會消除？翻到不同的，會不會蓋回去？
• ☐ 步數和計時有沒有正確增加？全部消除後，計時會不會停止？
• ☐ 全部消除後，有沒有顯示「完成」？
• ☐ 按「重新開始」，牌、步數、計時有沒有全部重置？
• ☐ 快速連點好幾張牌，會不會同時翻開超過兩張？

發現問題就告訴 AI 哪裡不對，例如「全部消除後計時沒有停」，請它修正後再玩一次。（換成其他遊戲時，依同樣的精神自己設計檢查項目。）

Step 4：調整遊戲

• 想調整就直接告訴 AI，例如「牌改成水果圖案」、「加一個最佳紀錄」。存檔後瀏覽器會自動更新。
• 結束時告訴 AI「停止開發伺服器」。

Step 5（選做）：加上音效

用模組二安裝的 ffmpeg 產生音效（不需要網路）。對 AI 說：

用 ffmpeg 產生兩個音效放到 public/sounds/：
配對成功時的短促「叮」聲，以及全部完成時三個音上升的勝利旋律。
然後在遊戲中對應的時機播放。

想要真人語音（例如「答對了！」）可以請 AI 改用 edge-tts。但 edge-tts 依賴微軟的線上服務，偶爾會暫時失效（出現 403 錯誤），失效時請改回 ffmpeg 音效。

Step 6（選做）：發布到網路上，分享給同學

把下面這段貼給 AI：

請把這個遊戲發布到 GitHub Pages：
1. 用 gh 建立 public repo，名稱 my-game，並把程式推上去
2. 依 repo 名稱設定 vite.config.js 的 base
3. build 後發布到 GitHub Pages，最後給我網址

若在階段三結束時執行過 gh auth logout，先重新做一次階段三的 Step 1 登入 GitHub。

GitHub Pages 需要 public repo（免費帳號的 private repo 無法使用）。發布後通常要等 1～2 分鐘網址才會生效。