♟️ Code CHESS in JavaScript (Super simple!)

Found this hard? Learn the fundamentals of JavaScript here:

🚀 Sign up to to receive access for the final code.

____
⭐ Check out my IDE here and get 1 month free:

⭐ New to code and none of this is making sense? Watch my ’12hr+ YouTube Coding Bootcamp’ in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It’s on my channel and its 100% free.

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership):

⭐ You can get a blockchain domain with my affiliate link here:

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! :

⭐ Sign up for weekly coding tips from my newsletter partnership:

You can also find me on:
Twitter:
Instagram:

57 Comments

  1. Nice video, very nice mastery of the languages but the logic could be really improved.
    For example, I'd have used way more OOP, define classes for the Game/Player/Piece.
    Having the ids reverted through some logic hidden in the functional part of the code is a very bad habit and makes code hardly maintainable if you do this 20x-50x-100x in a more complex project, instead we could have defined the direction pieces move depending on the color of the player or such directly in a class.

  2. @Code with Ania Kubów

    Hello! Before I get into this I want to ask, can I use VS Code for this project? Or do I have to download webstorm? Also is there any preperation that I need to do before that? Like donwloading the languages and what not?

    Thanks in advance 🙂

  3. Shalom evening howdy how my Lady. Super simple for you maybe NOT for me! Well, playing chess is but not programming it!

  4. i have been waiting ages for someone to build something like this with javascript 🙂 im currently building a survival game with buttons and crafting and inventory menu and its difficult maybe this video will give me more ideas hopefully with the drag and drop.

  5. Very impressive Ania, you are a source of inspiration for me, I'm beginner when it comes to coding. Hopefully I will become web developer. Thank you.

  6. Hey Ania Kubóv, Great Content💌, thanks for sharing it!

  7. This is not a full implementation of a "working game of chess", just a simple chessboard that is unusable to play an actual chess game. The checking for invalid moves is incomplete, it allows many invalid moves as well as not allow many valid moves. The implementation does not check for kings being 'in check', does not check for checkmate or stalemate, and does not implement castling, pawn promotion, and pawn capturing En Passant.

    In chess, the king cannot be captured, so the current implementation of winning is incorrect.

    If the king of the player whose turn it is could be captured on the next move, then it is 'in check,' and only moves that will take the king out of check are valid. If there are no valid moves available to escape check, it is checkmate, and the game ends as a win.

    If the king of the player whose turn it is cannot be captured on the next move, the player cannot make a move that would leave the king in check. If none of the pieces can make a valid move, the game ends as a stalemate, which is a draw.

  8. There is a lot that wasn’t covered here.. but that’s fine for a simple intro. Chess is a hard game to program.

    Such features missing are:
    – En passant
    – Illegal move detection
    – Checkmate detection rather than capturing the king

    There’s a lot more…

  9. Where can I find the source code to follow through. Thank you Ania!

  10. The pieces would still have pacman powers. Math doesn't know that the next field could be on the other side of the board

  11. Thank you for this great tutorial. Can you please make part two with AI in it?

  12. White king shouldn't be allowed to move when in check (at the end of your video)

  13. Really good job, I enjoyed the process and refreshed a lot of my JavaScript. Thank you for the content!

  14. for those on Firefox having issues with the dragDrop grabbing the path and svg you can add pointer-events to none in the css classes for those two

  15. This is really impressive!
    Do programmers usually get that fluent at the point of making everything at once with no tests and mistakes or you got prepared for the video?
    I struggle a lot and you just flow so easily and always know what is needed to get the result you're looking for. Congrats

  16. I was waiting to see how good of a chess player your algorithm is, but…

  17. "Innovation distinguishes between a leader and a follower." _Steve Jobs

  18. Awesome! The only thing I didn't like was the verbosity to validate if there were pieces between. We could create a function iterating through the path of start and target only checking first the direction of the movement. Greetings!

  19. do a part 2 how to make AI respond like Stockfish.

  20. "Be miserable. Or motivate yourself. Whatever has to be done, it's always your choice." –Wayne Dyer

  21. Thank you for sharing 🙂 Great job! Greetings from PL 🙂

  22. Great Stuff! Thanks for sharing – keep it up! 💯🔥

  23. Beginning today … ..it is a little distracting because you are so beautiful …but I'll concentrate …

  24. Thanks Ania, I was just thinking about how chess works in coding and your video popped up on Youtube. I'll subscribe and save it for my next project

  25. I am from iraq you beautiful
    I have question can I use your code in godot or no

  26. Please provide the source code, It would be helpful.

  27. Done! It was so cool Ania…. I'll make other stuff from your channel!! thank you!

  28. Well I think I need to learn algo a little bit more better so that I can also do stuff like that…! 🧐🧐🤔🤔

  29. Great content ! thank you Ania ! I have an issue with piece background. When they are in start position it's transparent, but when I drag the piece it appear to have a white background, I've set position and z-index oof square, svg and piece as in tutorial. Please any idea how can I change it ?

  30. I think a better approach would be to use cartesian coordinates for the board. Perhaps an array of arrays of length 8. The math for the move validation I feel would be easier.
    Very nice job Ania, thank you for the video! 👍🏽

  31. I don't know why it doesn't work for me I've followed the code step by step, and it doesn't work as it should, can anyone please share with me the final code so that I can see where I've made a mistake, because it's really frustrating…

Leave a Reply

Your email address will not be published. Required fields are marked *