Day30 of #100DaysOfCode

#CodeTogether Day 30/100

Hii folks 🙌

Today I completed the 30th the last video of JavaScript30!

Project 30: Whack A Mole Game

Source: https://javascript30.com

Learnings:

Today we are going to learn the last lesson of this JS30 series and we have been tasked to make a Whack A Mole Game! It was fun to build as we have been given the HTML and CSS already.

So, we started implementing the JavaScript inside the <script> tag.

First, we named a few variables as follows:

  const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;

We then have to randomize the time each mole stuck its head out.

function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}

And randomize which hole the mole stuck its head out of.

function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
if (hole === lastHole) {
console.log('Ah nah thats the same one bud');
return randomHole(holes);
}
lastHole = hole;
return hole;
}

Get the mole SVG image to peep out of the hole by toggling a CSS class and linking it to the random hole and time.

function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) peep();
}, time);
}

A function to re-set the game.

function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 10000)
}

Finally, we set up an event listener and function to score when the user clicked on the mole.

function bonk(e) {
if(!e.isTrusted) return;
score++;
this.parentNode.classList.remove('up');
scoreBoard.textContent = score;
}
WHACK_A_MOLE!

That’s all. I just completed all the 30 lessons in 30 days. Super happy and enthusiastic to hop on the next learning path. Stay tuned!

That is all for Day30 ✅

Thanks for reading, See you tomorrow!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store