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.   После каждой пятой...

JavaScript

class Game {
  constructor(){
      this.score = 0;
      this.lives = 0;
      this.isRunning = false;
      this.isMouse = false;
      this.levelSpeed = 0;
      this.speed = 2200;
      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');
      
  }

  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() {
    clearTimeout(this.animationTimeOut);
    this.levelSpeed += 1;
    this.speedValueNum.innerHTML = '';
    setTimeout(()=> this.speedValueNum.innerHTML = this.levelSpeed, 800);
    this.starAnimation()
  }

  setMoreSpeed(num) {
...