遊戲製作

第 3 課：萬能助手與遊戲架構

藉由 Antigravity 萬能助手將單一 HTML 檔案升級為多層次架構，並一鍵部署至 GitHub Pages。

適合：高中生、程式初學者更新：2026-09-30
antigravityrefactormodulesgithub-pages

萬能助手與遊戲架構

我們之前做的遊戲，全部程式碼都擠在同一個 HTML 檔案裡。 但是當程式碼幾百上千行時，AI 找問題會變笨，容易出錯。

所以從今天開始，我們改用一個**「萬能助手」**來幫我們寫程式、做苦工。 這個萬能助手就是 Antigravity！

🛠️ 今日任務：4 步驟升級你的遊戲

步驟 1：下載並安裝萬能助手（Antigravity）

【步驟目的】 安裝專屬於你的 AI 萬能助手，讓它能直接在你的電腦裡幫你建立檔案、整理架構與寫程式。

  1. 前往 Antigravity 官方下載網站：https://antigravity.google/
  2. 依照安裝精靈完成安裝，並開啟 Antigravity。
  3. 點選右上角登入 Google 帳號。

步驟 2：建立「遊戲工作區」並放入你的遊戲檔案

【步驟目的】 在電腦中給萬能助手一個專屬的「家」，讓所有遊戲程式、圖片和音樂素材都能集中管理。

  1. 在電腦桌面新增一個資料夾，命名為：你的學號+game（例如：112001game）。
  2. 把你前兩週做好的遊戲 HTML 檔案，下載後丟進這個新資料夾中。
  3. 重要觀念：這個資料夾就是你以後做遊戲的基地，也是萬能助手生活與工作的地方，以後所有的遊戲素材都丟這裡！

步驟 3：讓 Antigravity 把「單一檔案」升級為「多層次架構」

【步驟目的】 讓助手把擠成一團的單一檔案，自動拆解成遊戲業界標準的多檔案目錄架構。

  1. 在 Antigravity 中點選 File ➔ Open Folder（開啟資料夾），選取剛才在桌面建立的 你的學號+game 資料夾。
  2. 在對話框中複製並貼上以下指令給萬能助手：
你是負責處理問題與實作的工程助理，我是遊戲製作人。
我已授予你在此工作區的完整權限：凡是能寫程式、建立檔案、下載套件/MCP解決的問題，請優先直接動手完成，不需向我反覆請示，完成後向我報告結果即可。

請直接將此單檔 HTML 遊戲重構為標準的多檔案架構。請特別注意：請直接在【當前工作區根目錄】建立檔案，嚴禁再額外包裹一層父資料夾！
結構如下：
./（工作區根目錄）
├── index.html          # 遊戲入口（僅保留畫布容器與引入 main.js）
├── css/
│   └── style.css       # 畫面置中排版與畫布外觀樣式
├── assets/             # 外部資源目錄
│   ├── images/         # 圖片與角色貼圖
│   └── audio/          # 背景音樂與音效
└── js/                 # 遊戲模組代碼
    ├── config.js       # 遊戲設定（畫布尺寸、分數、速度、血量等參數）
    ├── main.js         # 遊戲啟動入口
    ├── game.js         # 遊戲主循環與狀態管理（開始、進行中、結束）
    ├── player.js       # 玩家角色控制與狀態
    └── enemy.js        # 障礙物/敵人生成與碰撞邏輯（若非動作遊戲可依核心機制調整為 board.js 等）

執行要求（完成任務優先，嚴禁偷懶）：
1. 嚴禁只出嘴不幹事！請立刻在當前工作區根目錄建立上述目錄與檔案，完整搬移並拆分程式碼，嚴禁使用 TODO 註解省略任何代碼。將原始單檔安全備份為 `_backup_original.html`。
2. 採用原生 JavaScript ES6 模組（import / export），index.html 需以 `<script type="module" src="./js/main.js"></script>` 引入。
3. 關鍵防錯：HTML 與各 JS 模組內的所有引用路徑（CSS、JS、圖片、音效），一律使用相對路徑（如 `./css/style.css`、`./js/config.js`），嚴禁使用以 `/` 開頭之根目錄絕對路徑，確保未來發布至 GitHub Pages 子路徑時能正常讀取！
4. 遊戲原本的所有玩法、操控手感與功能必須 100% 完整保留，且可在預覽中正常運行！
  1. 送出後，助手會自動建立資料夾並完成拆分。完成後點擊右上方 Preview 預覽視窗試玩，確認遊戲運作正常！

步驟 4：登入 GitHub，讓助手把遊戲發布到網路上

【步驟目的】 讓助手直接在電腦執行指令並推送到 GitHub，取得能在手機或電腦直接遊玩的公開網址。

  1. 打開瀏覽器，登入你的 GitHub 帳號（https://github.com）。
  2. 點選右上角 + ➔ New repository，倉庫名稱填寫 my-game，選擇 Public（公開），點擊 Create repository。
  3. 複製新倉庫的網址（例如：https://github.com/你的帳號/my-game.git）。
  4. 回到 Antigravity，複製並貼上以下指令，記得替換成你剛才複製的 GitHub 倉庫網址：
你是負責處理問題與實作的工程助理，我是遊戲製作人。
請直接呼叫終端機工具，將目前資料夾的所有遊戲檔案推送到我的 GitHub 倉庫，並發布為公開網頁。

我的 GitHub 倉庫網址是：[請貼上你的倉庫網址，例如 https://github.com/你的帳號/my-game.git]

授權與執行要求（完成任務優先，嚴禁甩鍋）：
1. 我已授予你使用終端機執行 Git 的完整權限。嚴禁只給我文字教學或叫我自己輸入指令！請直接在背景自動建立基礎 `.gitignore`（過濾作業系統暫存檔），並依序執行 git init、git add .、git commit -m "feat: modular game structure"。
2. 分支強制規範：commit 後，請務必執行 `git branch -M main` 將本地預設分支強制命名為 main，再執行 git push -u origin main。
3. 凡能用腳本、指令或工具排除的阻礙（如尚未設定 git user.name/email），直接自動排除並完成，事後向我回報。
4. 若遇到你無法代辦的權限問題（例如需要瀏覽器授權或個人 Token）：嚴禁直接報錯放棄！若終端機出現等待輸入，或畫面上跳出 GitHub 登入視窗，請主動在對話中提醒並清楚引導我授權；等我完成後，你必須立即自主繼續推送到完畢！
5. 推送完成後，請清楚告訴我在 GitHub 上啟用 GitHub Pages 的點擊路徑（指定 main 分支），並直接推算出我最終能公開遊玩的遊戲網址（格式：https://你的帳號.github.io/my-game/）。同時提醒我：GitHub Pages 首次建置需約 1~2 分鐘，若剛設定完點開出現 404 請稍候並重新整理即可！
  1. 依照助手指引，在 GitHub 倉庫的 Settings ➔ Pages 將 Branch 設為 main 儲存，即可點開公開網址在手機或電腦上暢玩！

📤 本週成果繳交 (Checkpoint 3)

  • 繳交內容：你的 遊戲公開網址（格式如：https://你的帳號.github.io/my-game/）。
  • 檢核重點：
    • 點擊公開網址，遊戲可以在手機或電腦瀏覽器順暢遊玩。
    • 打開你的 GitHub 專案，已經成功拆分成資料夾與多個檔案（不是只有一個 HTML 檔）。