Building a chess game using React hooks
I recently did an interview and they asked me to explain how I’d build a chess game. I had to explain all the classes & their functions. Also to explain where to place the logic. I wrote some pseudocode but I couldn’t really explain all the intricacies involved but I knew I could make the game itself if I wanted. So I made the game. Here is it.
The game is pretty basic & contains only piece movement logic. You can’t check or mate. You just straight up go kill the king 😂. But it shows how you can use react state to store the positions of pieces, captured pieces and also piece movements.
Here’s the code if you’d like to take a look:
Chess pieces
I used an SVG chess set from Wikimedia.
I couldn’t really used them as they were so I used a vector image tool to make some modifications, extracted the SVG and put that in the code.
Movement Logic
Knight
The items in the array are x & y directional movements. It consists of eight movements in the shape of L.
Bishop
The items in the array are diagonal movements in four directions. NW, NE, SE, SW.
Queen
The queen’s movements are n steps in any directions and that’s what the array contains.
King
The king moves one step in any direction
Rook
The rook moves in four directions: North, East, South, West.
Pawn
Last but not least here’s how the pawn moves around the board
Out of all the pieces, this is the most poorly written. But hey, it works 🤷. Pawns movement is the only tricky one because it doesn’t attack in the direction it moves. And that’s the reason you see this poor code.
I didn’t spend a lot of time building this, I just thought it’d be fun to build it.
The code
The board is an 8x8 matrix containing positions of the pieces. file and row and basically position of the target piece. You must have noticed the helper functions like getOptionsFromMoves and getOptionsFromDirections. The former helps with relative positions, it contains logic to check if a move is an attacking move or and invalid move because a piece of the same color is in the target position. The latter is for directional movements and contains logic to check if it ends up as an attack or if the movement is impeded by a piece of the same color.
Anyways, these functions return a list of positions a piece can move to.
Conclusion
This was just an experiment, the code is not production ready and if you’d like to improve it you can always raise a pull request to improve logic or just any regular code refactor. Also you can help me finish the game by writing check-mate logic.
