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

先在紙上設計遊戲:玩法、規則、勝負

在打開任何程式之前,先用一張紙把遊戲想清楚:玩家做什麼、怎麼得分、怎麼輸。這一頁設計書會是你和 Claude 合作時最好用的說明書。

第 8.1 堂約 12 分鐘

歡迎來到這個單元。接下來六堂課,我們要一起做出一款真的能玩、能分享給朋友的網頁小遊戲,名字叫「接便當」。

你不需要會寫程式。上一個單元你已經裝好了 Claude Code,接下來寫程式的苦工大多交給它。你的工作是當這款遊戲的設計師:決定它要怎麼玩、什麼時候好玩、哪裡要改。這也是 AI 時代最值錢的能力之一:AI 很會「做」,但「要做什麼」還是要你來想。

所以第一堂課,我們先不碰電腦。拿一張紙和一支筆就好。

為什麼要先在紙上設計?

你可能會想:「直接叫 AI 做一個遊戲不就好了?」可以試試看,你會得到一個「看起來像遊戲」的東西,但很可能不是你心裡想的那一款。原因很簡單:你沒說清楚的地方,AI 只能用猜的。

先在紙上想清楚有三個好處:

  • 改紙上的字,比改程式快一百倍。 發現規則不好玩,劃掉重寫就好。
  • 你和 AI 有了共同的說明書。 之後每一步都能說「照 DESIGN.md 的規則做」,不必每次重講。
  • 你知道什麼時候算「做完」。 沒有終點的專案,最後通常不會完成。

先找到「核心循環」

每一款讓人停不下來的小遊戲,都有一個很短、一直重複的動作循環,叫做核心循環(core loop)。玩家每幾秒就會走完一圈。

以「接便當」來說,這一圈是這樣的:

接便當的核心循環:看見東西掉下來、判斷要接還是要躲、左右移動托盤、加分或扣一條命,然後回到起點

核心循環越短、越清楚,遊戲就越容易上手。

如果這一圈本身不好玩,加再多特效也救不回來;反過來,如果這一圈好玩,就算畫面只有方塊,朋友也會一直按「再來一次」。所以設計的第一步,是用一句話寫下這個循環。

規則與勝負:遊戲怎麼結束?

有了核心循環,接著要決定「規則」。對新手來說,最常漏掉的是這三件事:

  1. 怎麼得分? 每種東西值幾分?分數會顯示在哪裡?
  2. 怎麼輸? 接便當用「三條命」:接到鬧鐘扣一條,扣完就結束。
  3. 為什麼要再玩一次? 接便當沒有「破關」,比的是最高分。玩家每一局都想超越上一次的自己。

還有一個常被忽略的問題:沒接到便當會怎樣? 我們的決定是「不扣分,只是可惜」。這樣新手比較不會挫折,真正的危險只有鬧鐘。這種小決定沒有標準答案,但一定要寫下來,不然 AI 會替你決定。

範圍要小:寫下「這版不做什麼」

第一次做遊戲的人,最常見的失敗不是做不出來,而是想做的太多:要有角色、要有商店、要有十個關卡、要能連線對戰……然後做到一半就放棄了。

所以設計書裡最重要的一欄,其實是「這版不做」。接便當這一版,我們刻意不做關卡、商店、角色和線上排行榜。等第一版發布、朋友玩過之後,再決定下一步要加什麼。

一頁設計書長這樣

把上面想到的整理在一張紙上,就是你的一頁設計書。以下是接便當的版本,你可以直接拿來用,也可以照著格式改成自己的:

接便當的一頁設計書,列出一句話玩法、操作、得分、失敗、難度、畫面與這版不做的事,旁邊貼著範圍檢查與勝負的便利貼

一頁就好。寫不下,通常代表範圍太大了。

請 Claude 幫你挑毛病

設計書寫完,可以請 AI 當你的第一位「挑剔的朋友」。注意,我們是請它提問和挑毛病,不是請它幫你重寫,決定權還是在你手上。

可以這樣問 Claude

我要做一款網頁小遊戲,這是我的一頁設計書:

(貼上你的設計書內容)

請你扮演有經驗的遊戲設計師,幫我做三件事:

  1. 指出規則裡還沒說清楚、會讓工程師不知道怎麼做的地方
  2. 找出可能讓玩家覺得無聊或挫折的地方
  3. 告訴我這個範圍對初學者來說會不會太大

先不要寫程式,也不要幫我加新功能,只要提問和建議就好。

它可能會問你:「托盤移動的速度是多少?」「同一時間最多會掉幾個東西?」有些問題你現在答不出來也沒關係,可以寫「之後試玩再決定」。

把設計書存成 DESIGN.md

最後,在電腦上建立一個新資料夾,取名 bento-game,這就是我們整個遊戲的家。在裡面新增一個文字檔,命名為 DESIGN.md,把設計書內容打進去。

.md 是 Markdown 格式,就是一般文字檔,用記事本或任何編輯器都能開。下一堂課開始,我們每次請 Claude 動手前,都會請它先讀這份檔案。

bento-game/
└── DESIGN.md
行動練習
  1. 用「玩家要___,才能___,但要小心___」造一句接便當的核心循環。如果你想換主題(例如夜市版、早餐店版),也很歡迎,只要玩法一樣就好。
  2. 照上面的格式寫一頁設計書,記得填「這版不做」那一欄。
  3. 把設計書貼給 Claude,請它挑毛病,挑一到兩個你同意的建議改進去。
  4. 建立 bento-game 資料夾,把最後的版本存成 DESIGN.md。

讀完了嗎?

標記完成後,單元與專案的進度會自動更新(只存在這台裝置的瀏覽器)。

卡住了?讓 AI 當你的家教複製這段提問範本,貼到 Claude 或其他 AI 工具,再補上你卡住的地方。

留言與討論

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

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