Code a Chess Game with Stockfish API – JavaScript Tutorial

Learn how to code a chess game that can be played against another person or a computer, using the Stockfish API. The tutorial uses JavaScript and Angular, but you can follow along if you don't know Angular.

✏️ Course created by @RobertsTech139

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:09) Object-oriented model for a chess app
⌨️ (0:03:55) Create a new Angular project
⌨️ (0:04:07) Abstract Piece class
⌨️ (0:07:07) Bishop class
⌨️ (0:08:22) Knight class
⌨️ (0:09:54) Queen class
⌨️ (0:11:25) Rook class
⌨️ (0:13:14) King class
⌨️ (0:14:37) Pawn class
⌨️ (0:17:06) Chessboard class basic props
⌨️ (0:20:36) Generate chess-board component
⌨️ (0:20:57) working on displaying the chessboard in the browser
⌨️ (0:27:58) Showing a final view of a chess board with pieces
⌨️ (0:28:12) Discussing how we can implement methods
⌨️ (0:32:13) Implementing method to check if the player is in check
⌨️ (0:37:08) Implement a method to see if the position is safe after the move
⌨️ (0:39:17) Implement a method to find all possible safe squares
⌨️ (0:46:39) Method that marks selected piece and piece's safe squares
⌨️ (0:52:16) Method that prevents selecting pieces of a player who is not playing
⌨️ (0:53:22) Implement a method that is responsible for moving pieces
⌨️ (0:56:22) Implement placingPiece method
⌨️ (1:00:03) Declare properties and methods that signalize if the king is in check
⌨️ (1:07:46) Implementing Castling move
⌨️ (1:14:48) implementing EnPassant move
⌨️ (1:21:03) implementing Pawn promotion
⌨️ (1:34:14) Implement a method that checks if a checkmate or stalemate is happening
⌨️ (1:36:32) Implement a method that checks if the game is overdue 50-move rule
⌨️ (1:37:58) Insufficient material poistions
⌨️ (1:41:48) Show game over the message in the application
⌨️ (1:43:31) Demonstrating that checkmate, stalemate, and insufficient material position detection are working
⌨️ (1:44:25) FEN Converter class
⌨️ (1:56:41) Implement a method that detects if the same position occurred 3 times (Threefold repetition rule)
⌨️ (2:01:19) Method that flips the board
⌨️ (2:03:00) Generate computer mode component, stockfish service
⌨️ (2:04:08) Quick explanation of stockfish rest API that we are going to use to get moves from the computer
⌨️ (2:05:42) Implement a method that retrieves the best move from the Stockfish engine
⌨️ (2:13:27) Install angular material
⌨️ (2:14:05) Working on nav menu component
⌨️ (2:18:40) Working on computer mode component
⌨️ (2:22:43) Working on a dialog component
⌨️ (2:37:10) Changes to make our application compatible with the new version of Stockfish API
⌨️ (2:38:01) showing play against computer dialog cmp
⌨️ (2:37:12) Working on a component that shows us the list of previous moves in the game
⌨️ (2:58:25) Implement a method that stores move in short algebraic notation
⌨️ (3:07:07) Implement a method to emit sound after each move type
⌨️ (3:12:22) Implement a method to navigate between moves in the move list component using the left and right arrow

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[danvillablanca]

As a chessplayer, I love it! Can't wait to binge watch this!

[ScaerieTale]

Funny story. Last night I was suffering insomnia and so was listening to a lecture about how discovering the laws of physics has been akin to learning chess by watching how each piece moves. This got me thinking about how chess would be programmed using modern OOP, and I started drawing up pseudo code classes for the prouject before finally getting some sleep. Today, this crossed my feed. Brb going to buy some lottery tickets while I'm on a roll 🤣

[dorklol]

damn thats something i waited for. learn how to angular and build a wonderful game. 100% doing this. thx :)

[LydiasPianoStudio]

I still use my old portable chess set from the 90s 😅 This is going to be a fun project!!! ❤❤🎉😊

[prakharporsa]

This is great, I love playing chess and I am learning react as well. Thinking to implement the same in react, this way would have understanding of both React and Angular. Hope so it's not that hard

[JDSchmelzerful]

absolute banger video, I used this as a starting point to build off of and implement a bunch of fun css hacks.

[bigger]

Thank you for the video.

But it is a bit hard to follow through and could use a bit of explanation between the steps what are we doing what is the reason we use this method etc.
I'm a beginner so, I don't know all the things we are doing guess this is not a tutorial for beginners and require a bit of knowledge already.

[studynewthings]

I followed till 23:00 after My UI starts to crash on the browser, I followed your git repository started to compare every line of code from that. I found that my project file does not have app.module.ts file. So, I went to stackoverflow, and found this solution `ng new chess-game --no-standalone`. I think I went through this problem because I downloaded the latest version of angular js.

[rexanguis]

I’m new, very new to coding, I thought JavaScript was front end and was just cosmetic, like html…..any reasonable explanation would be much appreciated, god bless

[tester]

Thanks for this great tutorial @freecodecamp.
Is there any way to add post game analysis and based on situation stockfish will suggest best possible moves so that players can improve their future games?
Kindly help me with information.

[saie]

Hi Robert

I downloaded your game from the github page you provided, and I am using it to improve my chess skills. But today when i launched the program and choose to play with the computer, I did my first move but the computer would not move at all

So I looked back into your video and I traced the error back to the stockfish api rest website itself. I clicked the "Send GET Request" button and in the Server response box I keep getting this

"Awaiting server response..."

And I kept waiting but it would not give out the response that you got at all

Is this error on my end or are the stockfish api servers down?

I been using the your program for the past month and its been working fine

Thanks
Sai

[LucasSousaRosa]

Would you be able to do the same to create a multiplatform trick game?

[MABItech_tutorials]

Very nice project we are looking for. But it seems the code is hardly to see it's very blur. I don't know if I'm the only one seeing it like that

[rionbinu-ndky]

Hi, could someone please help me understand @13:15 why we are writing hasMoved function for rook. why is it different from other pieces before that ?

[zepeaky]

How to open this file. I download with git hub. But i can't open.

[RobertsTech]

Thank you for posting. I am grateful for the opportunity to create a course for the greatest coding educational platform. Follow me for updates and stay tuned 🚀

[Wisewords-Tube]

I don't have laptop yet Please can I do this on my phone and how can I go about it.
Please help me out