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">
                        <span class="speed__value_num">1</span>
                    </div>
                </div>                
                <div class="board__score score">
                    <span class="score__value">0</span>
                </div>
                <div class="board__lives">
                    <div class="lives-wrapp">
                        <div class="lives-wrapp__heart"></div>
                        <div class="lives-wrapp__heart"></div>
                        <div class="lives-wrapp__heart"></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header__buttons">
                <button id="gameButt" class="header__button button button_start">Начать</button>
                <button class="header__button button button_guide">?</button>
                    <div class="modal rules">
                        <h2 class="modal__title">Правила игры</h2>
                        <p class="modal__name rule">1.   В одной из 5-ти норок в случайном порядке периодически появляется мышь 🐭и другие emoji 🐭🐼🐻🦊🐱🐱...</p>
                        <p class="modal__name rule">2.   Нужно поймать мышь. При клике по мыши игроку добавляется +10 очков.</p>
                        <p class="modal__name rule">3.   После каждой пятой...

CSS

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(https://img.icons8.com/color/48/000000/filled-star.png);
    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:  4% 0 0 20%;
}

.lives-wrapp {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 5% 10% 0 0;
}

.lives-wrapp__heart:not(:last-child) {
    padding-right: 5px;
}

.lives-wrapp__heart {
    max-width:...

JavaScript

class Game {
  constructor(){
      this.score = 0;
      this.lives = 0;
      this.isRunning = false;
      this.isMouse = false;
      this.levelSpeed = 0;
      this.speed = 1850;
      this.currentEmoji = null;
      this.currentPipe = null;
      this.gameInterval = null;

      


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


      this.startButt = document.getElementById('gameButt');
      this.selectPipe = document.querySelectorAll('.game-zone__pipe_animal');
      this.heartElem = document.querySelectorAll('.lives-wrapp__heart');
      this.livesInStock = document.querySelectorAll('.lives-wrapp__heart_active');
      this.speedValueNum = document.querySelector('.speed__value_num');

      this.finalModalScore = document.querySelector('.end-game__value');
      this.endGameModal = document.querySelector('.end-game');
      this.closeEndModal = document.querySelector('.submit-ok');
      
      
  }

  mouseChance() {
    for (var i = 0; i < 11; i++) {
      this.animals.push('🐭');
    }
  }

  fillLives() {
    this.heartElem.forEach((live) => live.classList.add('lives-wrapp__heart_active'));
    this.lives = this.heartElem.length;
  }

  deleteHeart() {
    this.livesInStock = document.querySelectorAll('.lives-wrapp__heart_active');
    this.lives = this.livesInStock.length;
    this.livesInStock[this.livesInStock.length - 1].classList.remove('lives-wrapp__heart_active');
    this.lives = this.lives - 1;
  }

  fillInitScore() {
    this.score = 0
    this.scoreElement = document.querySelector('.score__value');
    
  }

  fillMainScore(num) {
    this.score = this.score + num;
    this.scoreElement.innerHTML = this.score;
  }

  starAnimation() {
    this.speedValueNum.parentNode.classList.remove('star-animation');
    this.speedValueNum.parentNode.classList.add('star-animation');
    setTimeout(()=> this.speedValueNum.parentNode.classList.remove('star-animation'), 900);
  }

  fillInitLevel() {
   ...