Chenyi Wang

My version of “Whack-a-mole” is simple because there are only four holes, and the player can control the hammer using the WASD keys. This specific layout and control were inspired by the mini-game of “Whack-a-Cody” in the game “It Takes Two”.

The game has three interfaces: a home page, a game page, and a game-over page.

The main game has two modes: single-player mode and two-player mode, and the user can select the mode on the home page. The implementation of the buttons used the p5.clickable library. There is also a simple effect for hovering over the buttons.

In single-player mode, the user can use the WASD keys to move the hammer to the corresponding holes. The moles will appear automatically and randomly. Every success “whack” will give the player one point. There is a countdown timer and time bar at the top of the screen to show users how much time is left. The implementation of the timer used the p5.timer library. When the remaining time is less than 10 seconds, the color of the time bar will change to red. The game has a time limit of 60 seconds, and will automatically switch to the game-over page after the time is up.

The two-player mode is just for fun and is incomplete. The basic gameplay is the same as the single-player, but in addition, the appearance of the moles is manual instead of automatic. In this mode, the user can use the arrow keys to control the moles at the corresponding spot. This control was originally the testing I used when I first implemented the appearance of the moles, but I thought it would be fun to keep it as an additional gameplay.

In the game-over page, the user can choose to either play again (with the same mode selected before) by clicking the “replay” button or go back to the home page by clicking the “home” button. The implementation of the buttons is the same as the buttons on the home page. The overall interface transition is implemented by using the finite state machine.

Live Demo

Code available on GitHub.

Tools: p5.js