Checkers Board Game
Kieran Roberts posted:2021-01-07
- - html -
- - css -
- - typeScript -
- - eslint -
- - webpack -
- - jest -
I wanted to build a web based checkers board game from scratch that is the same as the original that we all know and love. Allowing two players to play against each other and win by removing all of the other players pieces. It should allow players to jump opponent pieces and king the correct pieces if they reach the far end of the board.
I recently began to learn typeScript and wanted my own project to begin working with static typing and hence decided to go with checkers as a game I remember playing often at school. While it is not a project that would be heavy on complex types I thought it would be a good intro to learn the basics in a real project and recognize the benefits of reducing the possibility of introducing bugs into the code.
As a project with few moving pieces, a framework or library was not required in this case so I went with plain html and css and used webpack to bundle and optimize the typeScript modules.
Finally testing was carried out using a combination of jest and testing-library as my optimal choice for this requirement. I like the use of the testing-library even outside of using react for its focus on leaving out the testing of implementation details meaning changes to these details won't end up breaking tests.
The overall outcome is a fully-functioning and performant version of a checkers board game built for the web. It is also responsive for a wide range of screen sizes allowing users to play the game on their phones or desktop.
It allowed me to explore the basics of typeScript such as using many of the new types introduced, type guards, optional chaining and more. After using typeScript in a full project I believe it was important in helping me avoid unnecessary errors and look forward to learning its more advanced features.
As far as improvements go, I could add a feature to allow the players to decide who plays first and also add support for dragging and dropping the pieces as opposed to only clicking using the drag and drop api.