The chess game everyone knows and loves, in vanilla JavaScript. Try it out!
- Chess variants (6x6, 5x5)
- Basic AI
- Basic pawn promotion (always promoted to queens)
-
The icons used for the pieces are just Unicode characters, they may look different depending on your device/browser. By default they should be displayed as text. Most systems have only an emoji for the pawn, Samsung created an emoji for every single piece. On Microsoft Edge you'll see only the pawn displayed as emoji and the other pieces as text. On Chrome everything seems to work the way it is intended.
Windows 10 (Chrome) Samsung -
I used mostly ES6 features (arrow functions, let, const, class, template strings) without using any transpiler, which means some old browsers like Internet Explorer are not supported.
- Just "going with the flow", not planning many things ahead. This approach is more fun since things are discovered and done step-by-step, but as the project got bigger I realized how planning things ahead would have saved a few of hours of refactoring.
- Not using classes from the start, or at least modules, to separate responsibilities. I ended up with almost 1000 lines of code in the same scope, a bit of organization is necessary to keep things manageable.
- Button to restart game on gameover (stalemate, checkmate), with same settings
- Improve menu styling
- Better dropdown
- Big emoji buttons instead of radio buttons
- Show above chessboard with overlay, so user knows the game is still there
- Responsive chessboard
- Allow to select AI strength
- Decouple Chess class from UI functions
- SVG icons for more consistency across browsers
- https://en.wikipedia.org/wiki/Promotion_(chess)
- https://en.wikipedia.org/wiki/Castling
- https://en.wikipedia.org/wiki/En_passant
- Make Ai wait a moment before doing its move
- Highlight last moved piece
- Undo
- Timer
- Tests!
- Simple NodeJS PvP server