高質感、流暢 3D 視覺與 Web Audio 音效的黑白棋網頁應用程式，支援單人對戰多難度 Web Worker AI（含 Alpha-Beta 剪枝與殘局求解器）及本機雙人對弈。
- 綠色經典實體質感：擬真綠色絨布棋盤與質感邊框，重現經典實體 Othello 的沉浸感受。
- 3D 棋子翻牌動畫：採用 CSS 3D
rotateY特效搭配離落子點距離的連續波浪 (Stagger Wave) 動畫。 - Web Audio API 無依賴音效：內建音效合成器，包含落子聲、連續翻牌音聲、Pass 跳過提示音與勝利祝賀樂聲（支援全域靜音切換）。
- 非阻塞 Web Worker AI 引擎：
- Easy (初級)：擬真隨機與簡單貪婪決策（帶 400ms 人類思考延遲）。
- Medium (中級)：位置權重矩陣 (Positional Weight Matrix) 與動態行動力 (Mobility) 啟發式評估。
- Hard (高級)：位元棋盤 (Bitboard BigInt) + Minimax 帶 Alpha-Beta 剪枝 + Zobrist 轉置表 + 階段評估 (角落/穩定性/行動力/奇偶性) + 殘局 14 空格 精確求解器 (Exact Solver)。
- 完整規則與輔助功能：
- 8x8 標準黑白棋起手盤與多方向翻牌規則。
- 自動判斷無子可下 (Pass) 並提醒。
- 支援本機雙人與對戰 AI 悔棋 (Undo)、重新開始與棋局歷程記錄。
- 全域桌面端鍵盤快捷鍵：
U(悔棋)、R(重來)、M(靜音切換)。 - 響應式佈局 (Mobile & Desktop 均能完美體驗)。
本專案的 AI 引擎採用競賽級黑白棋算法設計，具備強大的算力與流暢的異步架構：
AI 演算法運行在獨立的 ai.worker.ts 背景線程中，計算數十萬個棋局狀態時完全不阻塞主 UI 線程，確保網頁維持 60 FPS 流暢動畫與互動。
將 8x8 棋盤壓縮為兩個 64-bit BigInt 位元遮罩 (Black & White Mask)，所有夾棋與翻棋計算均轉換為 CPU 位元指令 (AND, OR, SHIFT)，計算效率提升數百倍。
高級 AI 透過 Minimax 前瞻搜尋 5~8 步以上未來的可能性，並透過 Alpha-Beta Pruning 剪去不必要的低價值分支。
為每一個棋盤生成 64-bit 哈希值並記錄於記憶庫中，避免對同一盤面重複計算。
當剩餘空位
| 難度等級 | 核心演算法 (Core Algorithm) | 評估指標 (Heuristics) | 思考特性 |
|---|---|---|---|
| Easy (初級) | 隨機 + 基礎貪婪 | 權重地圖 | 帶 400ms 人類模擬延遲 |
| Medium (中級) | Minimax (Depth 3-4) | 位置權重表 + 行動能力 (Mobility) | 優先搶佔角落與邊緣 |
| Hard (高級) | Bitboard Minimax + Alpha-Beta + Zobrist + Exact Solver | 角落控制 + 邊緣穩定性 + 奇偶性 + 行動力 | 殘局 14 空格精確求解，秒級思考 |
- Frontend: React 18, TypeScript (Strict Mode), Vite, Tailwind CSS
- Audio Engine: Web Audio API Procedural Synthesizer
- AI Architecture: Web Worker (
ai.worker.ts), Bitboard Engine (BigInt), Minimax with Alpha-Beta Pruning, Zobrist Transposition Table - Testing: Vitest (Unit & AI Empirical Challenge Suite), Playwright (Full E2E End-to-End Test Suite)
- CI/CD: GitHub Actions (Automated Typecheck, Vitest, Build, and GitHub Pages Deployment)
- Node.js
$\ge 18.0.0$ - npm
$\ge 9.0.0$
# 複製專案
git clone https://github.com/ImL1s/reversi.git
cd reversi
# 安裝依賴
npm install
# 啟動開發伺服器
npm run dev瀏覽器打開 http://localhost:5173 即可開始遊玩！
# 執行 TypeScript 類型檢查
npm run typecheck
# 執行 Vitest 單元測試 (含 AI 180+ 測試個案)
npm run test
# 執行 Playwright E2E 測試
npm run test:e2e
# 建構生產環境 Bundle
npm run buildreversi/
├── .github/workflows/ # GitHub Actions CI/CD (CI & Deploy)
├── src/
│ ├── ai/ # AI 引擎與 Web Worker 實作 (Minimax, Bitboard, Zobrist)
│ ├── audio/ # Web Audio API 音效合成器 (SoundManager)
│ ├── components/ # React UI 元件 (Board, ScoreBoard, ControlPanel 等)
│ ├── engine/ # 黑白棋核心規則 Engine 與位元陣列
│ ├── styles/ # CSS 3D 翻牌動畫與絨布棋盤樣式
│ └── App.tsx # 應用程式主入口
├── tests/
│ ├── unit/ # Vitest 單元與 AI 演算法測試
│ └── e2e/ # Playwright 端到端驗證測試
├── LICENSE # MIT 授權條款
├── package.json
└── vite.config.ts
本專案採用 MIT License 授權條款釋出。歡迎自由 Fork、修改與商業/個人使用。