225 Event delegation - indiviual handlers

by Felixito

HTML

<div class="container">
  <div class="arena">
    <div class="mole down"></div>
    <div class="mole down"></div>
    <div class="mole down"></div>
    <div class="mole down"></div>
    <div class="mole down"></div>
    <div class="mole down"></div>
  </div>

  <h1>Score</h1>
  <div class="score">
    0
  </div>

  <h1>Time left</h1>
  <div class="time-left">
    0
  </div>
</div>

CSS

.arena {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
}

.mole {
  border-radius: 50%;
  width: 33%;
  height: 33%;
}

.mole.up {
  background-color: black;
}

.mole.down {
  background-color: white;
}

JavaScript

const moles = document.querySelectorAll('.mole');
const scoreBoard = document.querySelector('.score');
const timeBoard = document.querySelector('.time-left');
const container = document.querySelector('.container');
const gameDurationMillisec = 30000;
const gameDurationSeconds = gameDurationMillisec / 1000; 

let lastMole;
let timeLeft;
let gameStarted;
let score;
let timeoutIDToggle;

moles.forEach(mole => mole.addEventListener('click', moleHitted));
container.addEventListener('click', startGame)

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

function randomIndex(length){
	return Math.floor(Math.random() * moles.length);
}

function randomMole(moles) {
  const mole = moles[randomIndex(moles.length)]
  
  if (mole === lastMole) {
  	return randomMole(moles);
  }
  
  lastMole = mole;
  return mole;
}

function updateTimeLeft() {
	if(gameStarted && timeLeft > 0){
  	timeLeft -= 1;
  	timeBoard.textContent = timeLeft;
  	setTimeout(updateTimeLeft, 1000);
  } else { 
    timeLeft = 0;
  	timeBoard.textContent = 0;
  }
}

function toggleMole() {
	if(!gameStarted) return;
  
	const time = randomTime(300, 1000);
  const mole = randomMole(moles);
  mole.classList.add('up');
  mole.classList.remove('down');
  timeoutIDToggle = setTimeout(() => {
    mole.classList.remove('up');
    mole.classList.add('down');
    
    if (gameStarted) toggleMole();
  }, time);
}

function startGame(e) {
	if(!gameStarted) {
    gameStarted = true;
    timeLeft = gameDurationSeconds;
    score = 0;
    scoreBoard.textContent = 0;
    timeBoard.textContent = gameDurationSeconds;
    
    setTimeout(updateTimeLeft, 1000)
    toggleMole();

    setTimeout(() => {
    	gameStarted = false;

      if(confirm(`You reached ${score} points.\n Click ok to start another game.`) == true){
        clearTimeout(timeoutIDToggle)
        startGame();
      }

    }, gameDurationMillisec)
	}
}
 
function moleHitted(e) {
  if(this.classList.contains('up')){
  	 ...