Code a Chess Game with Stockfish API - JavaScript Tutorial
ฝัง
- เผยแพร่เมื่อ 19 พ.ค. 2024
- 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.
💻 Code: github.com/awsomeCStutorials/...
Stockfish API: stockfish.online/
✏️ Course created by @RobertsTech139
You can email Roberts if you have questions: roberts.tech.info@gmail.com
/ roberts-tech-2a6977307
⭐️ 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
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
![ChatGPT Can Now Talk Like a Human [Latest Updates]](http://i.ytimg.com/vi/ID5tc61iksY/mqdefault.jpg)
![ChatGPT Can Now Talk Like a Human [Latest Updates]](/img/tr.png)
![คบซ้อน - วงL.กฮ. [ Official MV ]](http://i.ytimg.com/vi/5MtesqJ0I1c/mqdefault.jpg)
As a chessplayer, I love it! Can't wait to binge watch this!
What's your elo?
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 🤣
Haha interesting story, hope that this tutorial will give you answer you were looking for. And good luck with those lottery tickets, let us know if you win big prize😂.
damn thats something i waited for. learn how to angular and build a wonderful game. 100% doing this. thx :)
Ooo perfect 1st summer project.
I still use my old portable chess set from the 90s 😅 This is going to be a fun project!!! ❤❤🎉😊
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
Angular is back!
Sounds interesting
Can't wait to gain ELO with this
Good 👍🏻
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.
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.
Project coding started.
Would you be able to do the same to create a multiplatform trick game?
Please use full vue 3 project
it`s good idea. I am beginner developer and I decided to try code a chess game in vue 3 using this video, hope it`s useful experience
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.
Now, the UI is not crashing. The issue is resolved and again I am continuing the coding.
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
Keep at it buddy, there is a lot to learn, may God bless you!
Javascript was traditionally used to make websites more dynamic but it evolved over time where now you can use it for server side logic with NodeJS or even full desktop apps with Electron. Javascript is everywhere (for better or worse)!
Well this is not JavaScript to be exact. It is TypeScript which is extension for JavaScript that has type system on it plus he is using a JavaScript framework(Angular) which has a lot of structure to begin with. Entry for Angular framework is higher if you have intermediate understanding of JS I suggest you to go with React a library not a framework similar to Angular(Angular is Framework BTW). ReactJS has lower level of entry for beginners and has a lot of beginner friendly guides. This course is not for beginners at all. You need to Know what is OOP + Basics of Angular and its CLI + TypeScript and TypeScript OOP is a different world than JS's one I built alot of Angular websites but, I am also learning a lot in this course since you don't usually use OOP in building SPA websites. Don't get frustrated and keep on learning the basics and advance your way. Here is RoadMap that might help you : roadmap.sh/frontend
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
Watch in 1080p60.
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 ?
In order for player to have ability to castle, both king and rook were not allowed to make a move (also king must not be in check, and cant cross over the squares that are in check). That is the reason why we need to have that property for both the rook and the king.
@@RobertsTech139 Thank you !!!
Need help I want to Eran
How to open this file. I download with git hub. But i can't open.
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
can you do this using MERN stack
Is this beginner friendly?
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 🚀
My LinkedIN profile, where I would post more: www.linkedin.com/in/roberts-tech-2a6977307/
Ppl like you are our heroes!
Thank you for the time and knowledge you've put in.
I love chess so I cannot wait to create my own chess game!!
@@theNacho4174 Thank you for great words 🙂, hope you will learn something from this tutorial.
this link is wrong