為什麼做這個專案
在「和 AI 一起做出你的第一款遊戲」這個單元裡,你跟著步驟做出了接便當。那是一款很好的練習作品,但它是我們的點子。
這個專案要換你當主角:從一個只有你想得到的點子開始,設計規則、決定風格,和 Claude 一起把它做出來,最後發布到網路上,讓朋友玩到。
做完之後,你會發現自己學到的不只是「做遊戲」。把模糊的想法寫成清楚的規格、拆成 AI 做得出來的小步驟、每一步都親手驗收、根據真實使用者的回饋修正,這套流程可以用在任何你想用 AI 做出來的東西上:一個小工具、一個網站、一個工作上的自動化。遊戲只是最好玩的練習場。
開始前的準備
- 完成兩個單元。 你需要已經裝好 Claude Code(「架設你的 Claude 開發環境」),並做完接便當(「和 AI 一起做出你的第一款遊戲」)。接便當的程式碼是你最好的參考資料。
- 一個新資料夾。 替你的遊戲取一個英文小寫、沒有空格的名字,例如
typhoon-laundry,建立同名資料夾。 - 一本筆記本。 第一個里程碑完全不用電腦。
- 一兩位試玩的朋友。 現在就先約好,第四個里程碑會需要他們,大約只會佔用他們十分鐘。
- 時間安排。 整個專案大約 12 小時,可以分成三到四個週末,或每天晚上一小時、兩週完成。
每一站結束時,你手上都有一個能玩的版本。
實作指南
里程碑一:寫出一頁設計書
先在紙上想清楚,照第一堂課的格式寫一頁設計書。最重要的是兩件事:核心循環要能用一句話說完,「這版不做」那一欄要寫滿。
如果你還沒有點子,下面五顆點子種子可以挑一顆,再加上你自己的變化。它們都是原創的小點子,玩法類型簡單,範圍也適合第一款遊戲:
- 颱風天收衣服:曬衣桿上的衣服被風吹得越來越晃,點一下把衣服收進屋。風會越來越大,飛走三件就結束。難度旋鈕:風的強度、衣服的數量。
- 垃圾分類大作戰:垃圾一件件從上方出現,往左滑是資源回收、往右滑是一般垃圾、往下滑是廚餘。分錯扣命,速度越來越快。難度旋鈕:出現速度、垃圾的種類數。
- 早餐店點餐記憶王:客人說出一串餐點(蛋餅、蘿蔔糕、大冰奶),你要照順序按出來。每答對一位,下一位客人點得更多。難度旋鈕:餐點數量、顯示時間。
- 夜市撈魚:用紙網撈池子裡游來游去的魚,網子每撈一次就變得更容易破。在網子破掉前撈越多越好。難度旋鈕:魚的速度、網子的耐用度。
- 貓咪跳紙箱:按住蓄力、放開跳躍,讓貓咪跳到下一個紙箱上。紙箱之間的距離每次都不同,掉下去就結束。難度旋鈕:紙箱間距、紙箱大小。
寫好之後,用第一堂課的提示詞請 Claude 挑毛病,再存成資料夾裡的 DESIGN.md。
接著把你所有的點子分成三堆,這一步能救你很多時間:
只有「一定要有」那一堆會進入里程碑二和三。
里程碑二:做出方塊原型
這一步只做核心循環,而且全部用方塊和圓形。不要找美術、不要加音效,因為你要回答的只有一個問題:這一圈好玩嗎?
請先讀 DESIGN.md。我要做這款遊戲的第一個原型,只要做「一定要有」清單裡跟核心循環有關的部分。
規則:
- 純 HTML、Canvas 與 JavaScript,分成 index.html 和 game.js,不用任何外部函式庫
- 用 requestAnimationFrame 的遊戲迴圈,分成 update 和 draw,移動要乘上 dt
- 所有東西先用方塊和圓形表示,不要做美術
- 要同時支援鍵盤和手機觸控,觸控座標要換算成 canvas 座標
先不要寫程式,請把這個原型拆成三到五個小步驟列給我看,我同意後我們一步一步做。
注意最後一句:請 Claude 先拆步驟,你同意後再動手。這就是你在接便當學到的「一次一小步」,只是這次步驟由你和 Claude 一起規劃。每一步做完都要親手試玩驗收。
原型能玩之後,自己玩十分鐘,誠實地問自己:有沒有想再來一次的感覺?如果沒有,這是調整規則最便宜的時候。試著改改看速度、目標或失敗條件,不要急著往下。
里程碑三:完成完整的一局
讓遊戲從頭到尾走得完。對照接便當,你需要這些東西:
- 開始畫面,告訴玩家怎麼操作
- 得分與失敗條件,畫面上看得到分數和剩下的機會
- 結束畫面,顯示這次的成績
- 重新開始時,所有狀態都要歸零
- 用 localStorage 記住最高分,讀寫時用 try catch 保護
遇到 bug 時,記得用「我做了、我預期、實際上」的格式回報,並請 Claude 先解釋原因再修改。每完成一項就備份一次資料夾。
里程碑四:加上手感、美術並找人試玩
回到「有空再做」那一堆,挑幾項加進去。建議順序:
- 難度曲線:把難度集中到一個函式,慢慢變難、然後封頂。
- 回饋:成功時有音效和粒子,失敗時有震動或不同的聲音。
- 美術:先寫風格說明,再決定用程式畫、AI 生圖或免費素材。每用一個素材,就記進
CREDITS.md。
然後找至少兩位沒玩過的朋友試玩。記住三個原則:不事先解釋、只看不教、把觀察寫下來。把紀錄交給 Claude,請它依影響大小排序,你挑最重要的一到三項修正。
里程碑五:發布與分享
照第六堂課的步驟:先請 Claude 做發布前檢查,再從 itch.io、Cloudflare Pages、GitHub Pages 選一個發布。拿到網址後,用手機逐項檢查,修好問題再發布一次。
最後寫一段分享訊息,附上一句「哪裡覺得怪怪的?」,把連結傳出去。你可以把收到的回饋整理進 DESIGN.md 的最後,寫一段「第二版想做的事」。
全部打勾,就代表這個專案完成了:
- 有一份
DESIGN.md,核心循環能用一句話說完,而且寫了「這版不做」 - 遊戲是你自己的原創點子,沒有使用別人的角色、名稱、美術或音樂
- 能從開始畫面玩到結束畫面,並且可以重新開始
- 電腦用鍵盤、手機用觸控都能完整玩一局
- 有最高分紀錄,重新整理網頁後還在
- 至少有一種音效或視覺回饋,和一條會封頂的難度曲線
- 有
CREDITS.md,列出所有素材的來源與授權 - 至少兩位朋友試玩過,你根據回饋修正了至少一個問題
- 已經發布到網路上,並用手機實際測試過
- 把連結分享給至少三個人
延伸挑戰
完成之後還意猶未盡?這些挑戰可以讓你的遊戲更上一層樓,挑一個就好:
- 加入暫停功能:切換分頁或按下 P 鍵時遊戲暫停,回來時顯示「繼續」。
- 設定選單:讓玩家可以關掉音效,或選擇「簡單」與「困難」兩種難度。
- 每日挑戰:用今天的日期當作亂數的種子,讓所有人當天玩到一模一樣的關卡,可以互相比分數。
- 無障礙設計:除了顏色,再用形狀或圖示區分好東西和壞東西,讓色弱的玩家也能玩。
- 第二版:根據朋友的回饋做出 2.0 版,在 itch.io 頁面上寫一篇更新紀錄,說明你改了什麼、為什麼改。
做到這裡,你已經走完一個產品從點子到上線的完整流程。下一個想用 AI 做出來的東西,你已經知道該從哪裡開始了:先拿出一張紙。
做完了?分享你的作品!
到交流區貼上作品連結和心得,你的經驗會幫到下一個人。
專案討論
卡關了、有心得,或發現內容需要更新?都歡迎留言。留言使用 GitHub 帳號登入。