專案概述
一款使用 Vue 3 和 Vite 開發的網頁版國際象棋遊戲，提供美觀直觀的使用者介面。整合 Stockfish 國際象棋引擎提供 AI 對戰功能，支援完整的國際象棋規則實現，包含可行動位置高亮、FEN 格式棋盤狀態等進階功能。
技術挑戰與解決方案
象棋規則實現
需要完整實現國際象棋的複雜規則，包含特殊移動如王車易位、過路兵等。
解決方案：
設計完整的棋子類別系統，實作各種棋子的移動邏輯，並加入規則驗證機制。
AI 引擎整合
需要將 Stockfish 引擎整合到網頁應用中，並處理 AI 運算的異步問題。
解決方案：
使用 Stockfish.js 在瀏覽器中運行引擎，透過 Web Worker 避免阻塞主線程。
系統架構
使用 Vue 3 + Vuex 4 進行狀態管理，Stockfish.js 提供 AI 引擎，支援 FEN 格式的棋盤狀態序列化，Docker 容器化部署。
學習與心得
這個專案讓我深入理解了遊戲邏輯的設計模式，學會了如何處理複雜的狀態管理，以及 AI 引擎的整合技術。特別是在效能優化和使用者體驗設計方面有了顯著提升。
技術棧
前端框架
Vue 3Vuex 4Vite
AI 引擎
Stockfish.jsWeb Worker
部署
DockerNginx