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];
        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.innerHTML = this.randomAnimals();
      currentPipe.classList.add('emoji_animation');
      setTimeout(()=> {
        currentPipe.classList.remove('emoji_animation');
        
        currentPipe.innerHTML = ''
      }, this.speed);
    }
  startGame() {
      setInterval(() => this.creatingAnimals(), this.speed);
      document.addEventListener('click', () => this.clickOnEmoji());
    }
  
   clickOnEmoji(evt) {
      console.log(  'emoji= ' , '' + this.creatingAnimals())
    } 
      
}


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