Frontend2024

Vue Chess Game

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.

Tech Stack

Frontend Framework

Vue 3Vuex 4Vite

AI Engine

Stockfish.js

Deployment

Docker