Dive into a comprehensive JavaScript tutorial that guides you through coding a fully functional chess game with the ability to play against another person or a computer using the Stockfish API. Learn to implement an object-oriented model for a chess application, create piece classes, develop a chessboard component, and handle complex chess rules including castling, en passant, and pawn promotion. Master techniques for detecting checkmate, stalemate, and insufficient material positions. Explore FEN notation, implement the threefold repetition rule, and integrate the Stockfish engine for computer moves. Enhance the user interface with Angular Material, add sound effects, and create a move list component with navigation features. By the end of this 3-hour 17-minute tutorial, you'll have built a sophisticated chess game while gaining valuable insights into JavaScript and game development concepts.
Overview
Syllabus
⌨️ Introduction
⌨️ Object-oriented model for a chess app
⌨️ Create a new Angular project
⌨️ Abstract Piece class
⌨️ Bishop class
⌨️ Knight class
⌨️ Queen class
⌨️ Rook class
⌨️ King class
⌨️ Pawn class
⌨️ Chessboard class basic props
⌨️ Generate chess-board component
⌨️ working on displaying the chessboard in the browser
⌨️ Showing a final view of a chess board with pieces
⌨️ Discussing how we can implement methods
⌨️ Implementing method to check if the player is in check
⌨️ Implement a method to see if the position is safe after the move
⌨️ Implement a method to find all possible safe squares
⌨️ Method that marks selected piece and piece's safe squares
⌨️ Method that prevents selecting pieces of a player who is not playing
⌨️ Implement a method that is responsible for moving pieces
⌨️ Implement placingPiece method
⌨️ Declare properties and methods that signalize if the king is in check
⌨️ Implementing Castling move
⌨️ implementing EnPassant move
⌨️ implementing Pawn promotion
⌨️ Implement a method that checks if a checkmate or stalemate is happening
⌨️ Implement a method that checks if the game is overdue 50-move rule
⌨️ Insufficient material poistions
⌨️ Show game over the message in the application
⌨️ Demonstrating that checkmate, stalemate, and insufficient material position detection are working
⌨️ FEN Converter class
⌨️ Implement a method that detects if the same position occurred 3 times Threefold repetition rule
⌨️ Method that flips the board
⌨️ Generate computer mode component, stockfish service
⌨️ Quick explanation of stockfish rest API that we are going to use to get moves from the computer
⌨️ Implement a method that retrieves the best move from the Stockfish engine
⌨️ Install angular material
⌨️ Working on nav menu component
⌨️ Working on computer mode component
⌨️ Working on a dialog component
⌨️ Changes to make our application compatible with the new version of Stockfish API
⌨️ showing play against computer dialog cmp
⌨️ Working on a component that shows us the list of previous moves in the game
⌨️ Implement a method that stores move in short algebraic notation
⌨️ Implement a method to emit sound after each move type
⌨️ Implement a method to navigate between moves in the move list component using the left and right arrow
Taught by
freeCodeCamp.org
