Description and Background
Based on the classic carnival game, Whack-A-Mole features three exhilarating levels of mole-whacking fun! Click the moles as they pop up to whack them with your mallet.
Every mole you hit adds one to your score, but be careful, because the moles will burrow back down if you don't whack them in time, and the game speeds up as the timer progresses!
In later levels, the game will get more challenging by throwing two and three moles your way at once.
Additionally, I used Autoprefixer to optimize my CSS for all browsers, since CSS Grid and Flexbox are not yet universally supported.
To start, just click the Start button. The timer will begin counting down, and the moles will start popping up. When the timer reaches zero, the level is over, and the Start button will display which one comes next. Click that button to play the next level.
After three levels, the Start button will change to "Play Again", which you can click to try the game again.
And, since your high scores are saved by the browser's localStorage object, you can come back at any time and try to beat your best result.
Given more time, I would like to add a final fourth boss level, featuring a Super Mole that take multiple whacks to defeat.
All sounds and images are either public domain or licensed under Creative Commons.
mallet-up.png and mallet-down.png
The game is optimized for mobile, and works best in portrait mode. In order to display "Please Adjust Your Screen" while in landscape mode, I used the fundamentals described in the article below: