Hi, I’m learning whac-a-mole game code and I have a question at the part I pointed.
when I don’t use (hitPosition = null) the result I get is equal to the number of time function (randomSquare()) is executed.
Why do this happening?
const squares = document.querySelectorAll('.square');
const mole = document.querySelector('.mole');
const timeLeft = document.querySelector('#time-left');
const score = document.querySelector('#score');
let result = 0;
let hitPosition = null;
function randomSquare(){
squares.forEach(square => {
square.classList.remove('mole')
})
let randomSquare = squares[Math.round(Math.random() * 9)]
randomSquare.classList.add('mole');
hitPosition = randomSquare.id;
// ????? I have question at this part ??????
squares.forEach(square => {
square.addEventListener('mousedown', () => {
if(square.id == hitPosition){
result++;
score.textContent = result;
hitPosition = null;
}
})}
)
}
function moveMole(){
let timerId = null;
timerId = setInterval(randomSquare, 1000)
}
moveMole();
Then, I was able to write the following. Notice how I renamed the variables to make the code more readable.
function moveMole() {
timerId = null;
squares[molePosition].classList.remove("mole");
const randomSquare = squares[Math.floor(Math.random() * squares.length)];
randomSquare.classList.add("mole");
molePosition = randomSquare.id;
timerId = setTimeout(moveMole, 1000);
}
function countDown() {
currentTimeLeft--;
timeLeft.textContent = currentTimeLeft;
if (currentTimeLeft == 0) {
clearInterval(counterTimeId);
clearInterval(timerId);
alert("Game Over and your score is: " + result);
}
}
const squares = document.querySelectorAll(".square");
const timeLeft = document.querySelector("#time-left");
const score = document.querySelector("#score");
squares.forEach((square) => {
square.addEventListener("mousedown", () => {
if (square.id == molePosition) {
score.textContent = ++result;
}
});
});
let result = 0;
let molePosition = 0;
let currentTimeLeft = 60;
let counterTimeId = setInterval(countDown, 1000);
let timerId = null;
moveMole();
To make this game more realistic, see if you can make the mole movement random (i.e somtimes it shows up in another cell in 1 sec and the next time it is 1/2 a second).
Also, you can cheat at the game by clicking on the mole square really fast before it moves to the next random square. Ideally, you would want to remove the mole class and disable the ability to click on that cell until the next mole move to prevent someone from clicking on it after that hit position has already been clicked.
I did some changes in moveMole function, I made the mole movement random,
in the next movement it will not show in the same cell
function moveMole(){
timerId = null;
squares[molePosition].classList.remove('mole')
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
// to prevent mole to show in the same cell
if(randomSquare.id == molePosition){
while (randomSquare.id == molePosition){
randomSquare = squares[Math.floor(Math.random() * squares.length)]
}
}
randomSquare.classList.add('mole')
molePosition = randomSquare.id;
timerId = setTimeout(moveMole, 650);
}
and another thing I want to disable EventListener() when time is over
because I can click and get the point
I used removeEventListener() for each square but it doesn’t work
How can I solve this?
