蓋遊戲板
建玩家會實際看跟點的 UI
⏱ 預估 ~7 分鐘
01 · 讀一讀
你 server 準備好。現在你需要 face — 玩家在瀏覽器看的 HTML 頁。
這是純 HTML、CSS、JavaScript。沒 React、沒框架。就每個框架建在上面的 web 基礎。
那是故意的。框架對大 app 很好，但懂沒它們發生什麼讓你變強很多的工程師。React 壞時，懂原始 HTML 跟 JavaScript 的工程師幾分鐘修。只懂 React 的盯著錯誤幾小時。
重點整理
- 前端是純 HTML、CSS、JavaScript
- 這大小遊戲不需要框架
- 懂基礎讓你之後用任何框架更好
- Socket.io 自動提供自己的 client 函式庫
02 · Prompt 範本
請 Claude 蓋遊戲頁。對你需要的元素具體。
幫我建一個 public/index.html，給井字遊戲用。內容要包含：（1） 標題 'Tic Tac Toe'。（2） 一個 'Find Game' 按鈕。（3） 一個狀態區，初始顯示 'Click Find Game to start'。（4） 一個 3x3 的遊戲盤，每一格都是可點擊的 button 元素。（5） 一個預設隱藏的 'Play Again' 按鈕，遊戲結束後再顯示。請引入 '/socket.io/socket.io.js' 這個 Socket.io client script（Socket.io 會自動提供這個檔案），並連結到 style.css 和 client.js。
03 · Prompt 範本
現在請 Claude 對遊戲加樣式。給它具體設計方向。
幫我建一個 public/style.css，給井字遊戲用。把棋盤做成 3x3 的 CSS grid，每格 100x100 像素。格子之間要有清楚的邊框，空格 hover 時要有效果。整個畫面置中，背景採深色。X 用藍色、O 用紅色。把 Find Game 按鈕做得顯眼一點。符號放上去時加一個輕微的縮放動畫。整體感覺要乾淨、現代。
04 · 讀一讀
讓棋盤運作的關鍵 CSS 模式是 CSS Grid。不是複雜 table 排版或 flexbox hack,CSS Grid 三行建 3x3 棋盤：``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
就這。三欄、每個 100 pixel 寬、cell 間 4 pixel gap。瀏覽器處理所有排版數學。每個 cell 是 grid 裡的 <button> 元素 — 用 button 而不是 div 因為 button 預設鍵盤可聚焦跟螢幕閱讀器可存取。
重點整理
- CSS Grid 讓 3x3 排版簡單
- repeat(3, 100px) 建三個等欄
- 每個 cell 是 <button> 給鍵盤跟螢幕閱讀器無障礙
- Socket.io 在 /socket.io/socket.io.js 提供自己 client script
05 · 真機練習
啟動你 server、在瀏覽器預覽遊戲板。
06 · 選擇題
為什麼板 cell 用 <button> 元素而不是 <div> 元素？
- Button 預設看起來較好
- Div 不能有 click event listener
- Button 鍵盤可聚焦、螢幕閱讀器可存取，讓所有玩家都能用
- Socket.io 只跟 button 元素運作
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。