蓋前先規劃
在寫一行程式前把真實專案拆成塊
⏱ 預估 ~7 分鐘
01 · 讀一讀
新手做新專案最大錯誤：他們開終端機立刻寫程式。
專業相反。他們先規劃 — 即使計畫粗糙、之後會變。規劃表示在你請 Claude 蓋前思考你在蓋什麼。
用 AI 工作時這更重要。清楚計畫產出超好的 Claude Code 輸出。「給我蓋遊戲」拿到通用的。「蓋管理遊戲房間、配對等待玩家、驗證移動的 server」拿到你確切要的。
重點整理
- 寫程式前規劃 — 即使粗略計畫有幫助
- 清楚計畫產出更好 AI 產生程式
- 把專案拆層：server、client、溝通
- 你會蓋有線上配對的即時多人 tic-tac-toe 遊戲
02 · 讀一讀
下面是我們要蓋什麼：即時多人 tic-tac-toe 遊戲。兩個陌生人拜訪同 URL、被配對、即時玩遊戲。一個玩家走一步，立刻出現在另一玩家螢幕。
完成遊戲有三層：Server — 權威。它管理棋盤、執行規則、配對玩家、偵測勝利。Server 永遠對。玩家不能作弊因為 server 驗證每步。
Client — 介面。玩家在瀏覽器看的 HTML 頁。它顯示棋盤、抓點擊、顯示 server 更新。
Communication — 橋。Client 跟 server 之間流的 WebSocket 事件。玩家點 cell 時，client 送 'make-move' 事件。Server 驗證時，送 'move-made' 到兩玩家。
重點整理
- Server 管所有遊戲狀態 — 永不信 client
- Client 顯示 UI 跟抓使用者動作
- WebSocket 事件是它們間的溝通層
- Server 驗證每步 — 防作弊
03 · 步驟說明
走過任何即時 app 三層、每層在我們 tic-tac-toe 遊戲做什麼。
1. Server：裁判
管棋盤（3x3 格）、追誰的回合、驗證移動（cell 空？你的回合？）、偵測勝利跟和局、配對等待玩家進遊戲房間。
2. Client：螢幕
顯示 3x3 遊戲板當可點 cell。顯示狀態訊息（'等對手...'、'你的回合'、'你贏！'）。玩家點時送事件。Server 送改動時更新棋盤。
3. Communication：事件
Client 跟 server 之間契約。玩家點 'Find Game' — client emit 'find-game'。Server 配對兩玩家 — emit 'game-start' 到兩個。玩家點 cell — client emit 'make-move'。Server 驗證 — emit 'move-made' 到兩個。遊戲結束 — server emit 'game-over'。
4. Matchmaking：大廳
Server 上等待 queue。你點 'Find Game'，你加入 queue。第二玩家加入時，server 配對你們進房間、隨機分配 X 跟 O、開始遊戲。
5. Disconnect 處理：優雅清理
玩家遊戲中關瀏覽器，server 偵測斷線、通知對手。Queue 中斷線，server 移除他們。沒殭屍遊戲、沒卡住玩家。
04 · 看程式碼
這是兩玩家跟 server 之間事件流。研究它 — 這是我們接 7 課要實作的藍圖。
事件流：配對到遊戲結束
Player A Server Player B
| | |
|--- find-game ---->| |
|<--- waiting ------| |
| |<--- find-game -----|
|<-- game-start ----|--- game-start ---->|
| (you are X) | (you are O) |
| | |
|--- make-move ---->| | (A clicks cell 4)
|<-- move-made -----|--- move-made ----->| (server: valid!)
| | |
| |<--- make-move -----| (B clicks cell 0)
|<-- move-made -----|--- move-made ----->| (server: valid!)
| | |
| ...more moves... |
| | |
|<-- game-over -----|--- game-over ----->| (X wins!)
| (you won!) | (you lost) |
注意每個動作都過 server。玩家 A 從不直接跟玩家 B 講話。Server 收移動、驗證、廣播結果給兩玩家。這是任何多人遊戲標準架構。
05 · 確認清單
寫程式前確認你懂計畫。每個概念你舒服了就勾。
- Server 持有所有遊戲狀態 — 棋盤、誰的回合、誰是 X 跟 O
- Client 只送事件（像 'make-move'）跟顯示 server 告訴它的
- Matchmaking 把兩等待玩家配進遊戲房間
- 每步被 server 驗證才顯示給玩家
- 玩家斷線，server 清理跟通知對手
06 · 選擇題
為什麼 server 該驗證移動而不是信 client?
- Server 驗證比 client 快
- Client 沒存取遊戲狀態
- 玩家能改 client 程式作弊 — server 是唯一可信權威
- WebSocket 要 server 端驗證
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。