SERIES
Series A-Z dựng một web app học cờ vua thật bằng Phaser 3, Vite và TypeScript — từ con số 0. Mỗi bài kết thúc bằng một demo chạy ngay trong trình duyệt và một bản code tải về dạng .zip, không cần biết Git. Dọc series, chess.js lo phần luật, Stockfish.wasm lo AI đối thủ, sau cùng đóng gói thành chế độ puzzle và lessons có lộ trình.
Mở màn series làm game cờ vua học tập bằng JS HTML5: vì sao chọn Phaser 3, dựng dự án Vite + TypeScript từ con số 0, chạy được scene Hello Phaser đầu tiên.
Vẽ bàn cờ 8x8 đúng quy ước thi đấu: ô đen-trắng xen kẽ, nhãn a-h và 1-8, lật bàn theo phía người chơi. Kèm cách tách hằng số ra module để các bài sau tái dùng.
Tích hợp thư viện chess.js, parse FEN khởi tạo và render đủ 32 quân lên bàn 8x8 đã dựng ở bài 2. Hiểu lý do nên đứng trên một engine luật battle-tested thay vì tự viết.
Bắt input chuột Phaser, chuyển toạ độ pixel ↔ ô a1-h8, gọi chess.js sinh nước hợp lệ, vẽ chấm xanh trên ô đến trống và vòng đỏ quanh quân địch có thể bắt.
Cho người chơi vừa kéo-thả vừa click để đi quân. Tween về ô đích khi drop hợp lệ, tween về chỗ cũ khi drop sai. Mỗi nước thành công đồng bộ lại render từ chess.js để xử lý mọi flag (capture, en-passant, castling, promotion mặc định).
Ba luật cờ vua đặc biệt: modal cho người chơi chọn quân phong cấp, animate vua + xe đồng thời khi nhập thành, fade pawn bị bắt theo en-passant. Một FEN demo gói gọn cả 3 để test ngay.
Phối Phaser canvas với DOM HTML thật bên cạnh: turn indicator, danh sách quân đã bắt, lịch sử nước dạng PGN 2 cột cuộn được, nút Undo/Redo/Flip/Reset. Kèm event bus singleton để hai bên cùng đọc một state.
Đối thủ máy: chạy Stockfish trong Web Worker (off main thread), giao tiếp qua UCI text protocol, viết một StockfishClient Promise-based để scene gọi 'bestMove(fen)' tự nhiên trong async pipeline đã có.
Slider độ khó 1-5 map sang Skill Level + depth của Stockfish. Tutor 2nd worker phân tích từng nước, chấm điểm theo centipawn drop và gắn nhãn ✓ ?! ? ?? như Lichess. Có eval bar minh hoạ ưu thế.
Chuyển sang Phần IV 'Học có lộ trình'. Đóng gói ~6 puzzle hand-crafted vào JSON tĩnh, viết PuzzleManager state machine, intercept nước user trong BoardScene để kiểm tra theo solution. Hint progressive 2 mức và Try-again loop khi sai.
Hệ thống lessons có chương: 3 chương x ~3 bài, mỗi bài có FEN khởi tạo và 1 goal (mate / pieceAt / captureAt) được kiểm tra sau mỗi nước user. Progress lưu localStorage, mở khoá tiếp tục giữa các tab.
Chuyển progress sang IndexedDB qua idb-keyval (~1KB), sync cross-tab bằng BroadcastChannel, lưu/khôi phục mọi setting người dùng. Touch-action, focus-visible, aria-label cho a11y. Lighthouse a11y mục tiêu ≥90.