使用 React 建立井字遊戲

歡迎來到我版本的經典 井字遊戲！我使用 React 和 SCSS 創建了一個井字遊戲，並在大約 6 小時內完成。這個遊戲具有單人模式，可以與電腦對戰，還有勝利者公告彈出窗口，以及雙方的獲勝計數器。雖然網格可自定義為 n x n，但當前的獲勝邏輯僅支持 3 x 3。未來的改進包括更智能的電腦走法和即時多人功能。

概述

• 所需總開發時間： ~6 小時
• 使用技術： JavaScript (React) + SCSS

遊戲規則

1. 目標

遊戲的目標是在 3 x 3 網格上水平、垂直或對角線排列三個你的符號（X 或 O）。

2. 先後順序

• A 玩家總是先開始，並以 X 進行遊戲。
• 電腦對手以 O 進行遊戲，並在 A 玩家之後立即走子。

3. 遊玩方式

• 玩家輪流在網格上標記空白格子。
• 第一個排列三個符號的玩家贏得比賽。

4. 獲勝條件

如果一名玩家達成以下條件，則獲勝：

• 三個符號在 水平行
• 三個符號在 垂直列，或
• 三個符號在 對角線

5. 繪製

如果所有單元格都被填滿且沒有玩家滿足贏得條件，則遊戲以平局結束。

6. 計分追蹤

勝利計數器記錄玩家 A 和電腦的總勝利數。

實現的功能（MVP）

這個版本的遊戲包括：

1. 與電腦對戰： 一個有趣的單人模式，您將挑戰電腦
2. 勝利公告彈出窗口： 每局遊戲結束時，彈出窗口會顯示勝利者。
3. 勝利計數器： 追蹤玩家和電腦的總勝利次數。
4. 可自定義的網格： 創建一個 n x n 的網格（雖然贏得邏輯目前僅支持 3 x 3）。

可能的增強功能

展望未來，這裡有幾個改進的領域：

1. [UX] 分數的本地存儲： 在本地保存遊戲分數，以便在刷新瀏覽器後持續存在。
2. [UX/技術] 更智能的電腦移動： 用算法替換隨機移動，以實現更具競爭性的遊戲玩法。
3. [UX] 實時多人遊戲：啟用兩名玩家使用 Socket.io 技術進行實時競爭。
4. [技術] 高級 SCSS 組織：使用 mixins、變量和更好的結構技術重構 SCSS。
5. [UX/技術] 漸進式降級：確保與非現代瀏覽器的兼容性，以獲得更廣泛的支持。

設置和開發

前提條件

在開始之前，確保已安裝 Node.js（建議版本：6.4.1）。

入門指南

1. 從 GitHub 克隆倉庫。

2. 安裝依賴項：

npm install

3. 啟動開發伺服器：

npm start

• 在瀏覽器中打開 http://localhost:3000 查看應用。

4. （可選）為生產環境構建項目：

npm run build

這會創建一個優化的 build 文件夾，準備進行部署。

測試

在互動監視模式下運行測試：

npm test

技術細節

文件結構

該專案遵循標準 Create React App 結構，採用模組化的組件化方法。

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

描述與方法

• 該應用是使用 Create React App 快速啟動的 MVP 設置。
• 遊戲初始化一個 n x n 的格子以進行遊玩。
• 每個單元格都有點擊事件監聽器，允許玩家 A (X) 先行移動。
• 電腦的回合模擬隨機單元格選擇邏輯，這需要針對自定義格子大小進行增強。
• 使用 SCSS 進行樣式設計，專注於開發過程中的速度而非複雜性。

測試方法

手動測試

• 確保電腦在玩家 A 完成後進行移動。
• 驗證遊戲結束時會顯示獲勝者公告橫幅。
• 測試電腦的自動移動。

潛在單元測試

• 檢查電腦是否在玩家 A 之後進行移動。
• 驗證遊戲是否顯示正確的獲勝者。
• 測試格子初始化和用戶交互的邊緣情況。

結論

感謝您探索我的專案！

您可以在 GitHub 上找到完整的源代碼並為該專案做出貢獻。讓我們一起創造酷炫的東西！