jeudi 9 juillet 2020

How to check if the mole pops down and is not clicked

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