Built with ReactJS, this project is a connect four game that allows human player vs. human player gameplay (alternating turns on the same computer). The project was a Frontend Mentor challenge to build the game and get it as close to the provided design specs as possible. While the player vs. player version is complete, Player vs. CPU mode will be in version 2 of the project.
Clicking the 'Menu' button on the game board opens the in-game menu. In the in-game menu, players can 'Quit Game,' which directs them to the 'Main Menu,' or restart the game by clicking the 'Restart' button, resetting both player scores to zero.
Utilizing the CSS pseudo-elements '::before' and '::after' allowed me to create the gameboard, which consists of a shadow layer, a layer of 42 individual cells (one for each board slot), and the top layer. I set the z-index of the top layer to one and pointer events to none. With this in place, users can click on slots on the board even though they are in the middle layer. It also creates the effect of the game pieces displaying behind the top layer of the board. See the code snippet and accompanying figure.
To create the drop animation, I calculated the heights of the unplaced game piece at the top of a column and the height of the first available row. Next, I subtracted those heights to get the difference and used that information to update the game piece's drop animation using the transform and offset properties. I added a little bounce at the end of each drop to make it more realistic. Shout out to Thomas Campbell on Youtube for this animation approach.