I'm trying to improve a whack-a-mole game code that I found on github. I wanna give the player 3 lives and if the mole appears and the score doesn't increment, i want the player to lose a life. But i can't figure it out how. I tried to modify the peep function and create a variable prevscore, equal it to the score and then check if they're equal, but it doesn't seem to work. Basically, i'm trying to create a miss function where the player loses the lives, but i'm not really sure where to put it or how should it look like. I would really appreciate some help.
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const mySound=document.getElementById("sound");
const mySound2=document.getElementById("snd");
let lastHole;
let timeUp = false;
let score = 0;
var lives=3;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const index = Math.floor(Math.random() * holes.length);
const hole = holes[index];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
const time = randomTime(500, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) {
peep();
}
}, time);
}
function startGame() {
document.getElementById("btn").disabled = true;
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 90000)
}
function stopGame(){
timeUp=true;
holes.classList.remove('up');
var modal = document.getElementById("myModal").style.display='block';
}
function wack(e) {
if (!e.isTrusted) return;
this.parentNode.classList.remove('up');
score=score+100;
scoreBoard.textContent=score;
}
moles.forEach(mole => mole.addEventListener('click', wack));
moles.forEach(mole=>mole.addEventListener('click',function(){mySound.play();}));
.game {
width: 250px;
height: 400px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
cursor:url('hand.png'),auto;
}
.hole {
flex: 1 0 33.33%;
overflow: hidden;
width: 100%;
position: relative;
}
.hole:after {
display: block;
background: url('gaura1.png') bottom center no-repeat;
background-size: 100%;
content: '';
width: 100%;
height:100%;
position: absolute;
z-index: 2;
}
.mole {
background: url('flowAlb.png') bottom center no-repeat;
background-size: 100%;
position: absolute;
width: 100%;
height:100%;
top:100%;
transition: all 0.4s;
}
.hole.up .mole {
top: -20px;
z-index:3;
}
Aucun commentaire:
Enregistrer un commentaire