Explanation
What arcade game is more efficient at stress relief than Whack-A-Mole? Just a few wollops to the face of those pesky moles can melt a day’s stress away. The stress-relieving power of the arcade classic was my inspiration in building this static JavaScript app.
Obstacle
Beware the setInterval
! The biggest obstacle I encountered while building Whack-A-Mole was a setInterval
that I allowed to run rogue. The countdown timer uses a setInterval
to operate; originally, I had failed to clear the interval once the timer reached zero. Everytime a user started a new game, an additional setInterval
was called, causing the timer to countdown in at 2x the speed, 3x the speed, 4x, etc..
Solution
Fortunately my mentor, Cyle Dawson noticed my error and showed me how to resolve it. After 1) setting the interval to a variable, then 2) clearing it at the time the timer reached 0, the timer works like a charm.
Conclusion
Not only was my setInterval
causing a UI issue, it could’ve been a major memory leak as well. If I had scaled the app (adding a backend to track users, user scores, etc.) without clearing the interval each time a game ran, I’d have memory leaking out my ears.