JSFiddle - React, Tailwind, and code Playground

by Felixito

HTML

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

  <h1>Score</h1>
  <div class="game-container--score">
    0
  </div>

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

CSS

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

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

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

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

JavaScript

const moles = document.querySelectorAll('.arena--mole');
const scoreBoard = document.querySelector('.game-container--score');
const timeBoard = document.querySelector('.game-container--time-left');
const container = document.querySelector('.game-container');

const gameDurationMillisec = 10000;
const gameDurationSeconds = gameDurationMillisec / 1000;
const minAppearanceTime = 500;
const maxAppearanceTime = 1200;
const updateTimeInterval = 1000;

class Game{
  constructor() {
    Game.started = true;
    this.timeLeft = gameDurationSeconds;
    Game.score = 0;
    this.lastMole = null;
    scoreBoard.textContent = 0;
    timeBoard.textContent = gameDurationSeconds;
    this.timeoutIDToggle = null;
    this.timeoutIDTimeLeft = null;
  }

  static start(){
    if(!Game.started) {
      let game = new Game()

      setTimeout(() => game.updateTimeLeft(), updateTimeInterval)
      game.toggleMoles();
      setTimeout(() => {
        game.tearDown();
        let startNewGame = confirm(`You reached ${this.score} points.\n Click ok to start another this.`)
        if(startNewGame === true) Game.start();
        // does the object game have to deleted?
      }, gameDurationMillisec)
    }
  }

  static moleHitted(e) {
    let mole = new Mole(e.currentTarget);
    if(mole.isUp()){
      Game.score = Game.score + 10;
      mole.down();
    } else if(mole.isDown()){
      Game.score = Game.score - 25;
    }
    scoreBoard.textContent = Game.score;
  }

  toggleMoles() {
    if(!Game.started) return;

    let randomTime = this.randomTime(minAppearanceTime, maxAppearanceTime);
    let mole = this.randomMole(moles);
    mole.up();

    this.timeoutIDToggle = setTimeout(() => {
      mole.down();
      if (Game.started) this.toggleMoles();
    }, randomTime);
  }

  updateTimeLeft() {
    if(Game.started && this.timeLeft > 0){
      this.timeLeft -= 1;
      timeBoard.textContent = this.timeLeft;
      this.timeoutIDTimeLeft = setTimeout(() => this.updateTimeLeft(),...