JSFiddle - React, Tailwind, and code Playground

by fristyr

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cath the mouse</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/media.css">
</head>
<body>
    <main class="main">
        <div class="header">
            <div class="header__board">
                <div class="board__speed speed">
                    <div class="speed__value">3</div>
                </div>                
                <div class="board__score score">
                    <span class="score__value">123</span>
                </div>
                <div class="board__lives">
                    <div class="lives__heart-wrapper">
                        <div class="lives__heart">
                            <svg class="lives__heart-active" width="2.2rem" height="2rem" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 20L9.46 18.4783C3.74 13.4783 0 10.1087 0 5.97826C0 2.6087 2.64 0 6.05 0C7.92 0 9.79 0.869565 11 2.28261C12.21 0.869565 14.08 0 15.95 0C19.36 0 22 2.6087 22 5.97826C22 10.1087 18.26 13.4783 12.54 18.4783L11 20Z" fill="#A0B4BE"/>
                             </svg>
                         </div>
                        <div class="lives__heart">
                            <svg class="lives__heart-active" width="2.2rem" height="2rem" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 20L9.46 18.4783C3.74 13.4783 0 10.1087 0 5.97826C0 2.6087 2.64 0 6.05 0C7.92 0 9.79 0.869565 11 2.28261C12.21 0.869565 14.08 0 15.95 0C19.36 0 22 2.6087 22 5.97826C22 10.1087 18.26 13.4783 12.54 18.4783L11 20Z" fill="#A0B4BE"/>
                           ...

CSS

*{
    margin: 0;
    padding: 0;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 10px;
}
body {
    color: #000;
    font-family: "Montserrat", sans-serif;
    background: rgb(113,181,66) url(../img/game-dash.png) no-repeat;
    background-size: cover;
}
.main {
    max-width: 1366px;
    height: 100vh;
    margin: 0 auto;
    padding: 36px 5% 0 5%;
}

.header {
    display: flex;
    justify-content: space-between;
    height: 160px;
}

.header__board {
    position: relative;
    margin-top: 8px;
}

.speed {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.09);
    display: flex;
    justify-content: center;
    height: 13.6rem;
    width: 13.6rem;
    z-index: 3;
}

.board__speed {
    position: absolute;
}

.speed__value {
    width: 7.1rem;
    height: 6.9rem;
    background-image:  url(../img/star.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    font-size: 2.4rem;
    text-align: center;
    color: #fff;
    line-height: 7.5rem;
}

.score {
    align-items: center;
    display: flex;
    background-color: #A0B4BE;
    border: 1rem solid #fff;
    border-radius: 3.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 0, 0, 0.25) inset;
    transform: translate(27%, 23%);
    width: 21rem;
    height: 5rem;
}

.score__value {
    position: absolute;
    right: 20%;
    font-weight: bold;
    font-size: 3.5rem;
    color: #fff;
}

.board__lives {
    display: flex;
    align-items: center;
    width: 19.3rem;
    height: 4.6rem;
    background: #FFFFFF;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 35px;
    margin:  5% 0 0 20%;
}

.lives__heart-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 5% 9% 0...

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_animal');
        
        
    }
    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.addEventListener('click', () => this.clickOnEmoji());
        currentPipe.innerHTML = this.randomAnimals();
        currentPipe.classList.add('emoji_animation');
        setTimeout(()=> {
          currentPipe.classList.remove('emoji_animation');
          currentPipe.removeEventListener('click', this.clickOnEmoji, false);
          currentPipe.innerHTML = ''
        }, this.speed);
      }

      clickOnEmoji(evt) {
       
      } 

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


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