把整個開發過程完整記錄下來——看得懂的老師，這篇文章的架構應該足夠讓你自己動手做；看不懂或沒空自己弄的部分，也歡迎找我協助落實。
成果先亮相：這是真的做出來的東西
在講開發過程之前，先讓你看看實際做出來、學生真的會用平板玩到的畫面：
緣起：從一張手繪流程圖開始
這個專案的起點，是我一位音樂老師朋友畫的一張紙本遊戲流程圖，目標是教國小一、二年級學生認識普羅高菲夫《彼得與狼》裡「角色—樂器—音樂」的對應關係。教學設計是她的構想，我負責的是把這個構想落實成學生能在平板上實際操作、老師能即時看到成績的課堂遊戲。整個開發過程是透過與 AI 助手（Claude Code）對話完成的：我描述需求、AI 寫程式、我在平板上實測、回饋問題，反覆迭代。
用了哪些工具
整個專案主要是靠幾個工具互相搭配完成的，我把實際用到的工具整理成一份清單，方便你判斷哪些部分自己就能上手，哪些可能需要找人協助：
| 工具 | 用途 |
|---|---|
| Claude Code（AI 助手） | 就像請一位聽得懂中文、24 小時待命的工程師。我用平常講話的方式描述需求（例如「數字要用九宮格輸入」「音樂沒放完不能選答案」），它就把程式寫出來，我只需要在平板上實際玩玩看、講出「哪裡怪怪的」，它再去修。 |
| PowerPoint | 音樂老師朋友提供的教材簡報。角色、樂器、音樂怎麼對應，她本來就整理在裡面，AI 直接讀取、幫我轉成遊戲看得懂的格式，不用重新打一次。 |
| Google 試算表 | 拿來當「成績登記本」用，學生玩完分數會自動寫進表格，老師打開試算表就能即時看到每個人的成績，不用另外裝什麼系統。 |
| GitHub | 像一個專門存放程式碼的雲端硬碟，每次修改都會存一個版本紀錄，之後想找回舊版本、或接到別的服務，都會用到它。 |
| Zeabur | 讓程式碼「真的變成一個網站」的服務。寫好的東西平常只存在我電腦裡，透過這個服務，就會變成一個大家用手機、平板打開瀏覽器就能連上去玩的網址，而且改完程式後會自動更新，不用自己買主機、架伺服器。 |
簡單說：AI 負責寫程式和解決技術問題，我負責提供教學內容、實際測試、講出「這樣小朋友會不會搞不懂」。
遊戲怎麼玩
流程對應原本的教學設計，分成幾關：
- 進場檢查：學生打開網頁，先確認老師是否已經在教師控制台按下「開始」，還沒開放就停在等待畫面。
- 座號登入：用數字九宮格輸入座號，不用鍵盤——避免低年級學生打字錯誤，也不需要額外的閱讀/輸入能力。
- 遊戲規則說明
- 第一關：聽音樂，四選一猜角色，必須先播放過音樂才能作答，不能用消去法亂猜。
- 第二關：看角色圖片，四選一配對樂器。
- 第三關：看樂器，二選一配對正確的主題音樂片段，須先點擊聆聽、再點同一按鈕確認選擇。
- 結算與排行榜：分數即時寫入 Google 試算表，含班級欄位，供老師查看。
- 連連看複習：不計分，讓學生用連線的方式重新複習一次全部配對，用 SVG 畫出連線結果，加深印象。
教師控制台：讓老師掌控節奏
除了學生端的遊戲頁面，另外做了一個 /teacher/ 的管理頁面：
- 老師輸入班級名稱＋密碼，按「開始」，學生端才會真正放行進入遊戲；按「結束」之後，只會擋住「還沒開始玩」的新學生，已經在玩的學生不會被打斷，可以照常完成並送出成績。
- 這樣設計是為了配合實際上課節奏——老師可以先讓學生登入等待，統一講解規則後再按開始，也可以在下課前擋住新的人加入，但不影響正在寫題的學生。
- 每個班級的成績會自動分開記錄：不同班級名稱會各自寫進 Google 試算表裡獨立的分頁，同一天教好幾個班也不會混在一起看不清楚，老師打開試算表就能直接看到對應班級的排行榜。
為 6-8 歲學生設計介面時學到的事
這是整個專案裡最值得其他老師參考的部分，因為介面設計的決策，比程式技術本身更貼近「教學現場」的需求：
- 數字輸入一律用九宮格按鈕，不用鍵盤：低年級學生打字容易輸入錯誤，按鈕式輸入更直覺、不依賴打字能力。
- 不要預設加語音報讀：測試下來，圖片＋文字對這個年齡層已經足夠清楚，除非之後發現學生看不懂文字才需要加旁白，先簡單、有需要再加。
- 不要因為對象是小孩就自動放寬遊戲規則（例如限時、不能重播），先照原本教學設計做，真的卡關再調整——過度提前簡化反而可能失去原本的教學設計用意。
- 視覺回饋要「動」，不能只是變色：一開始只用邊框顏色標示「你剛剛點了哪一個」，後來發現對這年齡層不夠明顯，改成會跳動的等化器動畫（像音樂播放器那種跳動的音量條），學生才能清楚知道「這個正在播放」。動態比靜態顏色更容易被小朋友理解。
- 要求先聽過音樂才能作答：在需要聆聽音樂才能作答的題目，答案按鈕會先鎖住，強迫學生先按播放，避免用猜測跳過聆聽的環節，確保遊戲仍達到「聽辨」的教學目的。
部署與維運：怎麼讓學生真的連得上
程式寫好只是第一步，還要讓全班學生的平板能同時連上遊戲頁面：
- 專案託管在 GitHub，並串接雲端平台 Zeabur，每次把程式碼推上去，網站會自動重新部署，不需要手動操作。
- 上線後做過壓力測試（模擬 30 人同時遊玩），確認伺服器和 Google 試算表 API 都不是瓶頸；真正會讓載入變慢的是教室 wifi 頻寬，以及每個平板連線到伺服器機房（東京）需要的網路交握時間（每個新連線大約 150-200 毫秒的固定成本，這是網路距離的物理限制，程式邏輯改善不了）。
- 因此後續優化的重點反而是「讓等待感覺不到」：學生端在背景默默預先下載好素材，老師還沒開放遊戲前就先偷跑載入，等老師按下開始時，通常素材已經載完，學生幾乎不用等進度條。
想自己試試看？你可以怎麼跟 AI 說
如果你想用 AI 助手（例如 Claude Code）做類似的東西，不用一次就把需求講清楚。可以像下面這樣，從一個起手式開始，再依照跑出來的結果慢慢調整：
第一步，講清楚整體目標和限制：
我想幫國小一、二年級學生做一個平板上玩的音樂教學遊戲，教《彼得與狼》裡角色、樂器、音樂的對應關係。學生會用班上的平板連進去玩，老師要能即時看到每個學生的分數。座號輸入不要用鍵盤，因為學生還不太會打字。
第二步，如果你手上已經有手繪流程圖或紙本設計，直接拍照給 AI：
這是我朋友手繪的遊戲流程圖（附上照片），你先看懂裡面的流程，跟我確認一次你理解的每個步驟是什麼，再開始動手做。
不用先把手繪的東西自己轉成文字說明或流程圖軟體檔案，直接拍照或掃描給 AI 看就好，AI 讀得懂手寫字跡和箭頭關係。讓 AI 先複述一次它理解的流程，你確認「對，就是這樣」或指出哪裡理解錯了，比它直接埋頭寫程式再回頭改更省事。
第三步，把教材內容交給 AI 整理：
這是朋友給我的教材簡報（附上 PowerPoint），裡面有角色、對應的樂器、對應的音樂片段。幫我整理成程式可以讀取的資料格式，之後我要換內容的話，改這份資料就好，不用改程式。
第四步，看到問題就直接描述現象，不用懂技術原因：
第二關的樂器照片，因為長寬比不一樣（像法國號比較長），現在被裁切變形了，可以讓圖片維持原比例、留白就好嗎？
學生玩到第三關，有時候明明音樂已經播放過了，卻聽不到聲音，麻煩幫我看一下。
第五步，介面體驗的回饋，用「小朋友會不會懂」的角度講：
現在只有邊框變色來標示「你剛剛選了哪一個」，我覺得低年級學生可能看不出來，可以做得更明顯、更有動態感嗎？
第六步，遊戲做好之後，講清楚要怎麼給全班用：
這個遊戲要給全班學生用平板同時連線玩，我需要一個網址，讓學生打開平板瀏覽器就能玩，不是只有我自己的電腦看得到。幫我一步步設定，選免費或最便宜的方案就好。
這句話通常會讓 AI 建議一個雲端部署服務（我這次用的是 Zeabur）——你不用先搞懂它是什麼，AI 會引導你申請帳號、把程式碼放上去，最後給你一個網址，用手機或平板打開試試看能不能連上去就好。
學生的成績要能記錄下來，我事後要看得到——幫我存到 Google 試算表，不要用我看不懂的資料庫，我要打得開自己檢查。
Google 試算表是對非工程師最友善的「資料庫」，因為出問題你自己打得開看，不用學任何指令。AI 會引導你在 Google 後台建立一個叫「服務帳號」的東西（可以直接跟 AI 說「我不懂這是什麼，你帶我一步步做」），下載一個金鑰檔案、把它跟你的試算表連起來，整個過程照著步驟做就好，不用理解原理。
這幾個範例的重點是：你不用會寫程式、也不用懂技術名詞，只要能具體描述「你想要什麼」和「哪裡不對勁」，AI 就能接手處理剩下的部分。 如果你試到一半卡住了，或不想自己碰技術細節，也可以直接找我協助落實。
給想做類似專案的老師的建議
如果你也有教學上的手繪流程圖、想做成班級可以用平板玩的小遊戲，這個專案的經驗可以歸納成幾點：
- 教材內容和程式邏輯分開：把角色/題目/教學重點整理成結構化資料（例如 Excel 或 JSON），之後要換內容不用重寫程式。
- 善用你已經在用的免費工具當資料庫：不用學新的後台系統，Google 試算表就能滿足「老師想看即時成績」的需求。
- 介面設計以「這群學生實際會怎麼用」為第一優先，技術選擇（要不要用框架、資料庫）反而是次要決定。
- 先求堪用再求完美：一開始沒有語音、沒有花俏動畫，是先把最小可行版本做出來實測，再依照實際使用中發現的問題（例如「看不出來哪個在播放」）一項項加強。
- 上線後的效能瓶頸往往不在你想的地方：與其一開始就過度優化程式碼，不如先做壓力測試，找出真正卡住學生體驗的環節（很可能是教室網路，不是程式）。
看完這篇文章，如果你已經有清楚的教學構想、也想自己動手試試看，上面的架構和工具清單應該足夠當起點。如果你有構想但不想自己碰技術細節，或做到一半卡住了，也歡迎找我聊聊，我可以協助把它實際做出來。
花費：這個專案大概要花多少錢
老師常問的另一個問題是「這樣做要花多少錢」。這裡要先分清楚兩件事：開發階段花的錢，跟遊戲上線後持續運作要花的錢——這兩者差很多，很多人會誤以為 Claude Code 是每個月都要繳的固定成本，但其實遊戲做完、上線之後，就不再需要它了，除非之後要改版或加新功能。以下是主要項目目前（2026 年 7 月）的公開價格，不是我實際帳單金額，實際花費會因為帳號方案、是否跟其他專案共用主機而不同：
開發階段（一次性，做完就不用再付）
| 項目 | 費用 | 備註 |
|---|---|---|
| Claude Code（AI 助手） | 最低 US$20/月（Claude Pro） | 只有實際跟 AI 一起開發、討論、除錯的那段時間需要訂閱；遊戲做好上線後就可以取消，除非之後要改版才需要再訂 |
| PowerPoint 教材 | 朋友原本就整理好的教材，沒有額外花費 |
後來回頭翻了一下跟 AI 對話的紀錄，這個遊戲真正黏在電腦前跟 AI 對話、看畫面、給意見的時間，粗抓大概是 5 小時，分成兩段：一段是 2026/7/10 主要功能建置，一段是 7/15 微調細節、補齊素材。中間也穿插了不少 AI 自己在處理的時間，像是改程式、跑測試、部署這種事，丟給它跑，我不用一直盯著螢幕看，這段時間加起來抓個 10 小時左右。也就是說，真正要花我時間、需要我盯著的部分其實不多，大部分時候丟出需求或回饋之後，我可以去忙別的事，等 AI 做完再回來看結果就好。
上線後持續運作（每個月）
| 服務 | 費用 |
|---|---|
| 主機（自租 Tencent 伺服器，跟另外 1 個專案共用分攤） | 整台約 US$3-4/月，這個遊戲只是其中一部分 |
| Zeabur（部署平台訂閱） | 目前是 Free 方案，$0 |
| Google 試算表（成績登記） | 免費 |
| GitHub（程式碼版本控管、觸發自動部署） | 免費 |
粗抓下來，開發階段大概花一個月的 Claude Pro 訂閱（US$20，約新台幣 650 元）。遊戲做好上線之後，Zeabur 平台本身現在是免費方案，真正持續要付的是自己租的那台主機，每月大概 US$3-4（約新台幣 100-130 元），而且是跟另外一個專案一起分攤，不是這個遊戲獨自扛下來的費用。
本文整理自與 AI 助手（Claude Code）協作開發《彼得與狼》互動教學遊戲的過程紀錄。