Building a chess game using React hooks

Chess pieces

I used an SVG chess set from Wikimedia.

Movement Logic

Knight

Bishop

Queen

King

Rook

Pawn

Last but not least here’s how the pawn moves around the board

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Basith Kunimal

Basith Kunimal

7 Followers

Web Developer. Biker. Armchair Historian. German language student.