本章學習重點
井字遊戲雖然規則簡單，但它包含了許多遊戲開發的基本元素。透過這個專案，你將學會如何將一個遊戲的「規則」轉化為電腦可以理解和執行的「程式碼」。
- HTML 與 `data-` 屬性: 我們會使用 `data-index` 這樣的自訂資料屬性，來為每一個格子做標記。這是在 HTML 中儲存簡單數據的常用技巧。
- CSS Grid 佈局: 井字遊戲的 3x3 棋盤，是學習 CSS Grid 佈局最完美的範例。我們將學習如何用幾行 CSS 就快速建立出完美的網格。
- JavaScript 遊戲邏輯:
- 陣列(Array)儲存遊戲狀態: 我們會用一個長度為 9 的陣列，來記錄棋盤上每一個格子的狀態（是 'X'、'O' 還是空的）。這是將現實世界的遊戲盤面「數據化」的關鍵一步。
- 玩家輪替系統: 學習如何用一個變數來追蹤現在輪到哪位玩家，並在每次下棋後切換玩家。
- 勝利條件判斷: 這是最有趣的部分！我們會定義出所有可能的勝利組合（8種），然後寫一個迴圈來檢查每一次下棋後，是否有人達成勝利條件。
- 處理平手: 當所有格子都下滿，卻沒有人勝利時，遊戲就平手了。我們也需要將這個邏輯判斷加到程式中。
- 重置遊戲: 一個完整的遊戲，當然要有「重新開始」的功能。我們將學習如何寫一個函式，將所有變數和畫面恢復到初始狀態。
這個專案將會讓你對「演算法」和「程式邏輯」有更深刻的體會。現在，就來看看我們的成品，並準備好接受挑戰吧！