A web-based chess game developed with Vue 3, integrating Stockfish engine for AI battles.
Project Overview
A web-based chess game developed using Vue 3 and Vite, providing a beautiful and intuitive user interface. Integrates Stockfish chess engine to provide AI battle functions, supports full chess rule implementation including advanced features like valid move highlighting and FEN board state.
Technical Challenges & Solutions
Chess Rules Implementation
Needed to fully implement complex chess rules, including special moves like castling and en passant.
Solution: Designed a complete piece class system, implemented move logic for each piece, and added rule verification mechanisms.
AI Engine Integration
Integrating Stockfish engine into a web app and handling asynchronous AI calculations.
Solution: Used Stockfish.js to run the engine in the browser via Web Workers to avoid blocking the main thread.
Architecture
Uses Vue 3 + Vuex 4 for state management, Stockfish.js for AI engine, supports FEN format board state serialization, and Docker containerized deployment.
Learnings
This project allowed me to deeply understand game logic design patterns, learn how to handle complex state management, and integrate AI engines. Specifically significant improvements in performance optimization and user experience design.