所有入門單元免費開放 · 課程內容持續更新中

做一款屬於你的原創小遊戲

用「接便當」學到的方法,從零設計並發布一款完全屬於你的網頁小遊戲。玩法、規則、美術都由你決定,Claude 負責陪你把它做出來。

入門約 12 小時5 個里程碑

開始前,建議先完成

依建議順序排列。還沒全部完成也可以開始,遇到不會的再回去補。

  1. 05Claude 開發環境:架設你的 Claude 開發環境
  2. 08用 AI 做遊戲:和 AI 一起做出你的第一款遊戲

里程碑

  1. 1

    寫出一頁設計書

    用一句話寫出核心循環,填好操作、得分、失敗、難度、畫面與「這版不做」,再請 Claude 挑毛病。

  2. 2

    做出方塊原型

    只用方塊和圓形,做出核心循環能玩的版本。不管美術,先確認「這一圈」本身好不好玩。

  3. 3

    完成完整的一局

    加上開始畫面、得分、失敗條件、結束畫面、重新開始與最高分,讓遊戲能從頭玩到尾。

  4. 4

    加上手感、美術並找人試玩

    加入音效、特效與難度曲線,統一美術風格,找至少兩位沒玩過的朋友試玩,修正最重要的問題。

  5. 5

    發布與分享

    發布到 itch.io、Cloudflare Pages 或 GitHub Pages,用手機實測,附上製作名單,把連結分享出去。

為什麼做這個專案

在「和 AI 一起做出你的第一款遊戲」這個單元裡,你跟著步驟做出了接便當。那是一款很好的練習作品,但它是我們的點子。

這個專案要換你當主角:從一個只有你想得到的點子開始,設計規則、決定風格,和 Claude 一起把它做出來,最後發布到網路上,讓朋友玩到。

做完之後,你會發現自己學到的不只是「做遊戲」。把模糊的想法寫成清楚的規格、拆成 AI 做得出來的小步驟、每一步都親手驗收、根據真實使用者的回饋修正,這套流程可以用在任何你想用 AI 做出來的東西上:一個小工具、一個網站、一個工作上的自動化。遊戲只是最好玩的練習場。

開始前的準備

  • 完成兩個單元。 你需要已經裝好 Claude Code(「架設你的 Claude 開發環境」),並做完接便當(「和 AI 一起做出你的第一款遊戲」)。接便當的程式碼是你最好的參考資料。
  • 一個新資料夾。 替你的遊戲取一個英文小寫、沒有空格的名字,例如 typhoon-laundry,建立同名資料夾。
  • 一本筆記本。 第一個里程碑完全不用電腦。
  • 一兩位試玩的朋友。 現在就先約好,第四個里程碑會需要他們,大約只會佔用他們十分鐘。
  • 時間安排。 整個專案大約 12 小時,可以分成三到四個週末,或每天晚上一小時、兩週完成。

五個里程碑的路線圖:一頁設計書、方塊原型、完整的一局、手感美術與試玩、發布與分享

每一站結束時,你手上都有一個能玩的版本。

實作指南

里程碑一:寫出一頁設計書

先在紙上想清楚,照第一堂課的格式寫一頁設計書。最重要的是兩件事:核心循環要能用一句話說完,「這版不做」那一欄要寫滿。

如果你還沒有點子,下面五顆點子種子可以挑一顆,再加上你自己的變化。它們都是原創的小點子,玩法類型簡單,範圍也適合第一款遊戲:

  1. 颱風天收衣服:曬衣桿上的衣服被風吹得越來越晃,點一下把衣服收進屋。風會越來越大,飛走三件就結束。難度旋鈕:風的強度、衣服的數量。
  2. 垃圾分類大作戰:垃圾一件件從上方出現,往左滑是資源回收、往右滑是一般垃圾、往下滑是廚餘。分錯扣命,速度越來越快。難度旋鈕:出現速度、垃圾的種類數。
  3. 早餐店點餐記憶王:客人說出一串餐點(蛋餅、蘿蔔糕、大冰奶),你要照順序按出來。每答對一位,下一位客人點得更多。難度旋鈕:餐點數量、顯示時間。
  4. 夜市撈魚:用紙網撈池子裡游來游去的魚,網子每撈一次就變得更容易破。在網子破掉前撈越多越好。難度旋鈕:魚的速度、網子的耐用度。
  5. 貓咪跳紙箱:按住蓄力、放開跳躍,讓貓咪跳到下一個紙箱上。紙箱之間的距離每次都不同,掉下去就結束。難度旋鈕:紙箱間距、紙箱大小。

寫好之後,用第一堂課的提示詞請 Claude 挑毛病,再存成資料夾裡的 DESIGN.md。

接著把你所有的點子分成三堆,這一步能救你很多時間:

以颱風天收衣服為例,把點子分成三堆:一定要有(點擊收衣服、風越來越大、飛走三件就結束、分數與最高分)、有空再做(音效、雨滴粒子、棉被比襪子難收)、下一款再說(角色劇情、十個關卡、商店道具、線上排行榜)

只有「一定要有」那一堆會進入里程碑二和三。

里程碑二:做出方塊原型

這一步只做核心循環,而且全部用方塊和圓形。不要找美術、不要加音效,因為你要回答的只有一個問題:這一圈好玩嗎?

從設計書到原型

請先讀 DESIGN.md。我要做這款遊戲的第一個原型,只要做「一定要有」清單裡跟核心循環有關的部分。

規則:

  • 純 HTML、Canvas 與 JavaScript,分成 index.html 和 game.js,不用任何外部函式庫
  • 用 requestAnimationFrame 的遊戲迴圈,分成 update 和 draw,移動要乘上 dt
  • 所有東西先用方塊和圓形表示,不要做美術
  • 要同時支援鍵盤和手機觸控,觸控座標要換算成 canvas 座標

先不要寫程式,請把這個原型拆成三到五個小步驟列給我看,我同意後我們一步一步做。

注意最後一句:請 Claude 先拆步驟,你同意後再動手。這就是你在接便當學到的「一次一小步」,只是這次步驟由你和 Claude 一起規劃。每一步做完都要親手試玩驗收。

原型能玩之後,自己玩十分鐘,誠實地問自己:有沒有想再來一次的感覺?如果沒有,這是調整規則最便宜的時候。試著改改看速度、目標或失敗條件,不要急著往下。

里程碑三:完成完整的一局

讓遊戲從頭到尾走得完。對照接便當,你需要這些東西:

  • 開始畫面,告訴玩家怎麼操作
  • 得分與失敗條件,畫面上看得到分數和剩下的機會
  • 結束畫面,顯示這次的成績
  • 重新開始時,所有狀態都要歸零
  • 用 localStorage 記住最高分,讀寫時用 try catch 保護

遇到 bug 時,記得用「我做了、我預期、實際上」的格式回報,並請 Claude 先解釋原因再修改。每完成一項就備份一次資料夾。

里程碑四:加上手感、美術並找人試玩

回到「有空再做」那一堆,挑幾項加進去。建議順序:

  1. 難度曲線:把難度集中到一個函式,慢慢變難、然後封頂。
  2. 回饋:成功時有音效和粒子,失敗時有震動或不同的聲音。
  3. 美術:先寫風格說明,再決定用程式畫、AI 生圖或免費素材。每用一個素材,就記進 CREDITS.md。

然後找至少兩位沒玩過的朋友試玩。記住三個原則:不事先解釋、只看不教、把觀察寫下來。把紀錄交給 Claude,請它依影響大小排序,你挑最重要的一到三項修正。

里程碑五:發布與分享

照第六堂課的步驟:先請 Claude 做發布前檢查,再從 itch.io、Cloudflare Pages、GitHub Pages 選一個發布。拿到網址後,用手機逐項檢查,修好問題再發布一次。

最後寫一段分享訊息,附上一句「哪裡覺得怪怪的?」,把連結傳出去。你可以把收到的回饋整理進 DESIGN.md 的最後,寫一段「第二版想做的事」。

完成標準

全部打勾,就代表這個專案完成了:

  • 有一份 DESIGN.md,核心循環能用一句話說完,而且寫了「這版不做」
  • 遊戲是你自己的原創點子,沒有使用別人的角色、名稱、美術或音樂
  • 能從開始畫面玩到結束畫面,並且可以重新開始
  • 電腦用鍵盤、手機用觸控都能完整玩一局
  • 有最高分紀錄,重新整理網頁後還在
  • 至少有一種音效或視覺回饋,和一條會封頂的難度曲線
  • 有 CREDITS.md,列出所有素材的來源與授權
  • 至少兩位朋友試玩過,你根據回饋修正了至少一個問題
  • 已經發布到網路上,並用手機實際測試過
  • 把連結分享給至少三個人

延伸挑戰

完成之後還意猶未盡?這些挑戰可以讓你的遊戲更上一層樓,挑一個就好:

  • 加入暫停功能:切換分頁或按下 P 鍵時遊戲暫停,回來時顯示「繼續」。
  • 設定選單:讓玩家可以關掉音效,或選擇「簡單」與「困難」兩種難度。
  • 每日挑戰:用今天的日期當作亂數的種子,讓所有人當天玩到一模一樣的關卡,可以互相比分數。
  • 無障礙設計:除了顏色,再用形狀或圖示區分好東西和壞東西,讓色弱的玩家也能玩。
  • 第二版:根據朋友的回饋做出 2.0 版,在 itch.io 頁面上寫一篇更新紀錄,說明你改了什麼、為什麼改。

做到這裡,你已經走完一個產品從點子到上線的完整流程。下一個想用 AI 做出來的東西,你已經知道該從哪裡開始了:先拿出一張紙。

做完了?分享你的作品!

到交流區貼上作品連結和心得,你的經驗會幫到下一個人。

前往交流區

專案討論

卡關了、有心得,或發現內容需要更新?都歡迎留言。留言使用 GitHub 帳號登入。

留言區即將開放。現在可以先到 GitHub 討論區 發問,或看看 交流頁 的其他管道。