JSFiddle - React, Tailwind, and code Playground

by anyagorodetskaya

HTML

<!DOCTYPE html>
<html>
  <head>
  
  </head>
  <body>
    <div id='overlay'>
      <div id='modalwindow'>
        <svg viewBox="0 0 48 48" focusable="false" aria-hidden="true" role="img" id="closemodalwindow" tabindex="0"><path d="M38.071 9.928a19.9 19.9 0 1 0 0 28.143 19.9 19.9 0 0 0 0-28.143zm-6.294 23.547a1 1 0 0 1-1.414 0L24 27.111l-6.364 6.364a1 1 0 0 1-1.414 0l-1.7-1.7a1 1 0 0 1 0-1.414L20.888 24l-6.363-6.363a1 1 0 0 1 0-1.414l1.7-1.7a1 1 0 0 1 1.414 0L24 20.888l6.365-6.363a1 1 0 0 1 1.414 0l1.7 1.7a1 1 0 0 1 0 1.414L27.112 24l6.363 6.364a1 1 0 0 1 0 1.414z"></path></svg>
        <span id='modalwindowheader'>Приветствуем, игрок!</span>
        <span>Мы, ученихи 8-х классов Технико-Экономического лицея, хотим представить Вам игру для развития нейросетей головного мозга.</span>
        <span>В этой игре Вам предстоит пройти несколько уровней, содержащих различные задания, которые прокачают Вашу логику и внимание!</span>
      </div>
    </div>
    <div id='firstscreen' class='screen'>
      <span id='begingame'>Нажмите <span id='tobegin'>Старт</span> для начала</span>
      <button id='falsebutton'>
        Начать
      </button>
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Jacque_Fresco_and_lemon_tree.jpg" id="jakfresko" alt="Жак Фреско" title="Жак Фреско">
    </div>
    <div id='navscreen' class='screen'>
      <span id='navheader'>Выберите режим игры:</span>
      <nav>
        <ul>
          <li id='tofirstlevel'>I уровень</li>
          <li id='tosecondlevel'>II уровень</li>
          <li id='tothirdlevel'>III уровень</li>
        </ul>
      </nav>
    </div>
    <div id='firstlevelscreen'>
      <span class='description'>
       Запомните, где находятся все красные круги
      </span>
      <span id='timer'>0:10</span>
      <div id="firstlevel"> 
      <div class='circle circle-2' style="top:43px;left:10px;">
      
      </div>

      <div class='circle circle-1' style="top:34px;left: 213px;">
      
      </div>
      <div...

CSS

body {
  font-family: cursive;
  font-size: 16px;
  color: dimgray;
  background-color: aliceblue;
  overflow-y: auto;
}

div {
  width: 100%;
  text-align: center;
}

/*Модальное окно*/

#overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3;
  overflow: auto;
  opacity: 0;
  transition: opacity 1s ease-in 0s;
}

#modalwindow {
  position: absolute;
  background-color: white;
  padding: 30px;
  display: inline-block;
  z-index: 4;
  width: calc(100% - 40px);
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #e3e3e3;
}

svg#closemodalwindow {
  width: 20px;
  height: 20px;
  fill: var(--color-gray-light);
  position: absolute;
  top: 12px;
  right: 20px;
  cursor: pointer;
  outline: none;
}

#modalwindow>span {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-bottom: 7px;
}

#modalwindowheader {
  font-size: 18px;
  margin-bottom: 10px;
}

/*Начало игры*/

#begingame,
#navheader {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 25px;
  margin-bottom: 20px;
  font-size: 22px;
}

#tobegin {
  cursor: pointer;
}

#falsebutton {
  display: inline-block;
  padding: 15px 30px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #e3e3e3;
  background-color: #6e45e2;
  font-size: 22px;
  font-weight: bold;
  color: white;
}

#jakfresko {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 250px;
  border-radius: 4px;
  cursor: pointer;
}

#navscreen {
  display: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  font-size: 20px;
  display: inline-block;
  padding: 15px 30px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #e3e3e3;
  background-color: #6e45e2;
  font-weight: bold;
  color: white;
}

#firstlevelscreen,
#secondlevelscreen {
  display:...

JavaScript

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; 
}

$( document ).ready(function() {
   $("#overlay").css({'visibility': 'visible', 'opacity': '1', 'background-color': 'rgba(0, 0, 0, 0.4)'});
});

$('#closemodalwindow').on('click', function() {
	$("#overlay").css({'visibility': 'hidden', 'opacity': '0'});
});

$('#tobegin').on("click", function() {
	$('.screen').css({'display':'none'});
  $('#navscreen').css({'display':'block'});
});

$('#tofirstlevel').on("click", function() {
	$('.screen').css({'display':'none'});
  $('#firstlevelscreen').css({'display':'block'});
  $('#timer').text('0:10');
 	while (($('.red-color').length==0 || $('.red-color').length>4) && ($('.green-color').length==0 || $('.green-color').length>4)) {
    $('.circle').each(function(index) {
        var n = getRandomInt(1,4);
        if (n==1) {
          $(this).css({'background-color':'crimson'});
          $(this).addClass("red-color");
        }
        else if (n==2) {
          $(this).css({'background-color':'limegreen'});
          $(this).addClass("green-color");
        }
        else if (n==3) {
          $(this).css({'background-color':'gold'});
          $(this).addClass("yellow-color");
        }
        else {
          $(this).css({'background-color':'deepskyblue'});
          $(this).addClass("blue-color");
        }
    });
	}
  window.ans = $('.green-color').length;
  window.n=0;
  
  var _Seconds = 10;
  int = setInterval(function() { 
  	if (_Seconds > 0) {
    	_Seconds--; 
    	$('#timer').text("0:"+_Seconds); 
  	} else {
   	 clearInterval(int); 
     $('#firstlevelscreen').children('.description').text('Нажмите на все зеленые круги');
     $('.circle').css({'background-color':'gray'});
     $('.circle').addClass('clickcircle');
     $('#timer').text("0:10"); 
     var Second = 10;
     int2 = setInterval(function() {
     	if (Second > 0) {
      	Second--; 
   ...