Whack a Mole

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whack a Mole</title>

  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <header class="main-header">
    <h1 class="title">Whack a Mole!</h1>

    <div class="controls">
      <div class="score">Score: <span>0</span></div>

      <div class="control-set">
        <div class="timer">0</div>
        <button type="button" name="start">Start!</button>
      </div>
    </div>
  </header>

  <div class="game">
    <div class="hole">
      <img class="mole" src="./img/mole.png" alt="Mole">

      <div class="grass">
        <img src="./img/grass.png" alt="Grass">
      </div>
    </div>

    <div class="hole">
      <img class="mole" src="./img/mole.png" alt="Mole">

      <div class="grass">
        <img src="./img/grass.png" alt="Grass">
      </div>
    </div>

    <div class="hole">
      <img class="mole" src="./img/mole.png" alt="Mole">

      <div class="grass">
        <img src="./img/grass.png" alt="Grass">
      </div>
    </div>

    <div class="hole">
      <img class="mole" src="./img/mole.png" alt="Mole">

      <div class="grass">
        <img src="./img/grass.png" alt="Grass">
      </div>
    </div>

    <div class="hole">
      <img class="mole" src="./img/mole.png" alt="Mole">

      <div class="grass">
        <img src="./img/grass.png" alt="Grass">
      </div>
    </div>

    <div class="hole">
      <img class="mole" src="./img/mole.png" alt="Mole">

      <div class="grass">
        <img src="./img/grass.png" alt="Grass">
      </div>
    </div>
  </div>

  <script src="./scripts.js"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:700|Gloria+Hallelujah|Rammetto+One');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: linear-gradient(160deg, rgb(143, 22, 237), rgb(27, 141, 15));
  background:linear-gradient(57deg,#e36f53,#fa5ae0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 250px;
}

.title {
  width: 325px;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 48px;
  color: #f7e376;
  transform: rotate(-25deg);
}

.controls {
  font-family: 'Rammetto One', cursive;
  font-size: 30px;
  width: 300px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 30px;
}

.controls .score {
  margin-bottom: 20px;
  flex-basis: 100%;
  text-align: center;
}

.controls .timer {
  width: 65px;
  font-size: 45px;
  margin-right: 30px;
}

.control-set {
  display: flex;
}

.controls button[name='start'] {
  width: 100px;
  height: 70px;
  border-radius: 5px;
  border: none;
  outline: none;
  background: #36C3C3;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 24px;
  color: #fff;
  line-height: 3;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.controls button[name='start']:hover {
  background: #20bcbc;
}

.controls button[name='start']:active {
  transform: scale(1.1);
}

.game {
  width: 750px;
  width: 70vw;
  height: 70vh;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.hole {
  width: 33%;
  height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hole img {
  object-fit: contain;
}

.grass {
  margin: auto;
  z-index: 10;
}

.mole {
  width: 150px;
  opacity: 0;
  margin: auto;
  transform: translateY(140px);
  transition: all .3s ease-in-out;
}

.mole.out {
  transform: translateY(0);
  opacity: 1;
}

@media screen and (max-width: 1050px) { .game { width: 90vw; } }

@media screen and (max-width: 780px) {
  .main-header {
    height: auto;
    justify-content: center;
  }

  .title {
    width: 85px;
    font-size: 24px;
    line-height: 1.5;
    position: relative;
    top: 30px;
    margin-right: 50px;
  }

  .controls {
    width: 150px;
    height: auto;
    flex-direction: column-reverse;
  }

  .control-set {
    align-items: center;
  }

  .controls .score,
  .controls .timer {
    font-size: 20px;
    margin: 0;
  }

  .controls .score {
    position: relative;
    top: 10px;
  }

  .controls button[name='start'] {
    width: 70px;
    height: 50px;
    font-size: 18px;
  }

  .game {
    width: 90vw;
    height: 70vh;
  }

  .hole {
    height: 45%;
    position: relative;
    align-items: center;
  }

  .grass {
    width: 80%;
    bottom: -10px;
    position: absolute;
  }

  .grass img {
    width: 100%;
  }

  .mole {
    width: 80px;
    position: relative;
    top: -35px;
  }
}

const start = document.querySelector('.controls button[name="start"]'),
      moles = document.querySelectorAll('.mole'),
      scoreBoard = document.querySelector('.controls .score span');

let playTime, interval, lastIndex;
let score = 0;

function startGame() {
  playTime = 10;
  scoreBoard.textContent = 0;
  score = 0;

  clearInterval(interval);
  countdown();

  showMole();
}

function showMole() {
  let mole = randomMole(moles.length),
      time = randomTime(500, 1500);

  mole.classList.add('out');

  setTimeout(() => {
    mole.classList.remove('out');

    if (playTime > 0) showMole();
  }, time);
}

function scorePoint() {
  score++;
  scoreBoard.textContent = score;

  this.classList.remove('out');
}

function countdown() {
  const timer = document.querySelector('.timer');

  interval = setInterval(() => {
    if (playTime < 0) {
      clearInterval(interval);
      return;
    }

    timer.textContent = playTime;
    playTime--;
  }, 1000);
}

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

function randomMole(molesCount) {
  let index = Math.floor(Math.random() * molesCount),
      mole = moles[index];

  if (index === lastIndex) return randomMole(molesCount);
  lastIndex = index;

  return mole;
}

start.addEventListener('click', startGame);
moles.forEach(mole => mole.addEventListener('click', scorePoint));