jeudi 25 juin 2020

Whack-A-Mole Web Game with Javascript

I'm trying to develop some Whack-a-mole web game, with html, css and javascript, but i'm new to this, so i would really appreciate some help. This is my code so far and what i'm trying to do now is to:

  1. make the start button only work once, cause now i can click it for how long i want and the moles are starting to appear from all holes
  2. make the mole be clicked only once, now i can click it as it fades out so the score increments without sense
  3. check if the mole is clicked or not, cause when it s not clicked, i wanna display a message that says u missed and maybe add some lives to the game
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');

let lastHole;
let timeUp = false;
let score = 0;

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() {

  scoreBoard.textContent = 0;
  timeUp = false;
  score = 0;

  peep();
  setTimeout(() => timeUp = true, 90000)
}

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

}


moles.forEach(mole => mole.addEventListener('click', wack))
<button onClick="startGame()">Start</button>
<span class="score">0</span>

<div class="game">
  <div class="hole hole1">
    <div class="mole"></div>
  </div>

  <div class="hole hole2">
    <div class="mole"></div>
  </div>

  <div class="hole hole3">
    <div class="mole"></div>
  </div>

  <div class="hole hole4">
    <div class="mole"></div>
  </div>

  <div class="hole hole5">
    <div class="mole"></div>
  </div>

  <div class="hole hole6">
    <div class="mole"></div>
  </div>

  <div class="hole hole7">
    <div class="mole"></div>
  </div>

  <div class="hole hole8">
    <div class="mole"></div>
  </div>

  <div class="hole hole9">
    <div class="mole"></div>
  </div>

</div>



Aucun commentaire:

Enregistrer un commentaire