JSFiddle - React, Tailwind, and code Playground

by fristyr

HTML

<div class="game-zone">
  <div class="game-zone__pipe"></div>
  <div class="game-zone__pipe"></div>
  <div class="game-zone__pipe"></div>
  <div class="game-zone__pipe"></div>
  <div class="game-zone__pipe"></div>
</div>

CSS

.game-zone {
    display: flex;
    flex-direction: row;
}

.game-zone__pipe {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    position: relative;
    margin-right: 40px;
    text-align: center;
    width: 100px;
    height: 100px;
    background: #71b542;
    box-shadow: inset 0px 9px 10px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

JavaScript

class Game {
    constructor(){
        this.score = 0;
        this.lives = 3;
        this.isRunning = false;
        this.isMouse = false;
        this.levelSpeed = 1;
        this.lastPipe;
        this.speed = 1500;

        


        this.animals = ['🐭', '🐼', '🐻', '🦊', '🐱', '🐮', '🦁', '🐽', '🐨', '🐰', '🐯'];


        this.startButt = document.getElementById('gameButt');
        this.selectPipe = document.querySelectorAll('.game-zone__pipe');
        
    }
    randomPipe() {
        const indexPipe = Math.floor (Math.random() * this.selectPipe.length);
        const pipe = this.selectPipe[indexPipe];

        if (pipe === this.lastPipe) {
            return this.randomPipe();
          }
          this.lastPipe = pipe;
          return pipe;
    }

    randomAnimals() {
        const indexEmoje = Math.floor (Math.random() * this.animals.length);
        const animals = this.animals[indexEmoje];
        return animals;
    }


    creatingAnimals() {
        let currentPipe = this.randomPipe();
        currentPipe.addEventListener('click', this.emojeClickHandler);
        currentPipe.innerHTML = this.randomAnimals();
        setTimeout(()=> {
          currentPipe.removeEventListener('click', this.emojeClickHandler, false);
          currentPipe.innerHTML = ''
          
        }, this.speed);
      }

    emojeClickHandler(evt) {
      console.log( 'pipe' , 'number= ' + this.randomPipe , ':' , 'emoji= ' , '' + this.randomAnimals)
    } 

    startGame() {
        setInterval(() => this.creatingAnimals(), this.speed);
      }
      
}


let game = new Game;
game.startGame();