Whack-A-Mole Game JavaScript Project

Hosted Project

https://github.com/JS-Beginners/whack-a-mole-project

GitHub Source Files

https://github.com/JS-Beginners/whack-a-mole-project

Project Objective

The objective of this JavaScript Project is to wire up a JavaScript Whack-a-Mole game.

JavaScript Used

• JavaScript core (e.g. functions, Math object, DOM API)

My Personalize Summary

Level of Difficulty

This is one of those projects that I again had to simply settle with the code along. Therefore, I wouldn't exactly call this a beginner's JavaScript project. While the JavaScript itself is easy to understand, it would take me many hours to implement before I got such a game to run correctly. In other words, I found the code easy to read, understand, and follow but the project hard in practice to implement. The program only has 5 functions though.

• A function to create a random amount of time that the mole will peep.
• A function to choose the random hole from which the mole will peep.
• A function to make the mole pop from the random hole using the two above functions.
• A function to start the game.
• A function to “prevent” cheating.

So again, I'd used this project more as a code along than a do-it-yourself. The good news is I have it as a reference if I ever have to create something like this. As the solution was presented, I copied the code and then I studied it. I did make a few changes to the CSS however. I added CSS media queries so the game would be more responsive on mobile devices.

New Things Learned or Refreshed

I learned about the .isTrusted property that lives on the event object. “The isTrusted read-only property of the Event interface is a Boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().”

Time to Code

Since I simply followed along on this project, it took me about two hours to listen, watch, and code out the solution.

Lines of Code

This project uses around 50 lines of JavaScript code, including white space and code comments.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the JS content in the script.js file.
3. Implement the JavaScript code in your own script.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's beginner JavaScript course by following the link below.
5. Share a link to your finished project in the comments section below so we can all see and comment on it!

What You Should See

1. Visit the hosted github project to see this Whack-A-Mole JavaScript game in action.

Need to see the video solution for this project?

Get Bluelime's 27 Beginner JavaScript Projects course now!