JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id = "more">
    
    <div id = "Korabl">
      
    </div>
      <div id = "Ochki">
          <h3>Score:</h3>
          <span id= "score"> 0 </span> 
      </div>
          <div id = "lifes">
            <span></span>
            <span></span>
            <span></span>
          </div>
    <button id = "Start-knopka">Start</button>
    <!--<div id = "skaly">
          
    </div>-->
    <!--<div id = "money">
      
    </div>-->
    <!--<div id = "sunduk">
      
             
    </div>-->
    <div id = "game over"></div>
  </div>
  <div>
  <h1> Time:
    <span id = "timer"> 10 </span>
  </h1>
  </div>

CSS

#more {
  width: 600px;
  height: 600px;
  background: #839de785;
  position: relative;
 
 
}
#more img{
  width: 100%;
  height:100%;
}
 
#Korabl {
  width: 30px;
    height: 90px;
    background: #181d18;
    border-radius: 42%;
    top: 500px;
    left: 275px;
    position: absolute;
}
 
 
#Ochki {
  width: 10px;
  height: 10px;
  position: absolute;
 
}
#Ochki h3{
  font-size: 25px;
    top: -18px;
    left: 3px;
    position:absolute;
 
}
#Ochki span {
  font-size: 25px;
    margin-top:8px;
    left: 75px;
    float: left;
    position: absolute;
}
}
 
#lifes {
  position: absolute;
  top: 10px;
  right: 10px;
  display:block;
 
}
 
#lifes span {
  width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #241b1b;
    background: #fb3d1d;
    display: block;
    float: right;
 
}
#Start-knopka {
  width: 100px;
    height: 60px;
    top: 270px;
    left: 250px;
    position: absolute;
    font-size: 30px;
}
 
.skaly {
  top: 100px;
  left:100px;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    background: #191010;
    font-size: 10px;
    
}
 
 
.money {
  top: 100px;
  right:100px;
  position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #241b1b;
    background: gold;
    float: left;
    font-size: 10px;
 
}
 
.sunduk{
  top: 50px;
  right:50px;
  position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 60%;
    border: 2px solid #241b1b;
    background: blue;
    float: left;
    font-size: 10px;
 
}
 
.a {
  top: 80px;
  left: 100px;
 
}
 
.b {
  top: 80px;
  left: 150px;
}
 
.c {
  top: 80px;
  left: 200px;
}
 
.d {
  top: 80px;
  left: 250px;
}
 
.e {
  top: 80px;
  left: 300px;
}
 
.f {
  top: 80px;
  left: 350px;
}
 
.g {
  top: 80px;
  left: 400px;
}
 
.h {
  top: 80px;
  left: 450px;
}

JavaScript

function random(max) {
	// случайное число от 1 до максимума
	var sluchaynoeChislo = 1 + Math.random() * (max + 1);
	// округляем до целого
	sluchaynoeChislo = Math.floor(sluchaynoeChislo);
	// return = вернуть результат 
	return sluchaynoeChislo;

}


var startKnopka = document.querySelector("#Start-knopka");
// startKnopka.onclick = poyavlenieSkal;
startKnopka.onclick = go;
// startKnopka.onclick = poyavlenieSunduk;


function poyavlenieSkal() {
	var skaly = document.createElement("div");
	skaly.id = "skaly";
	more.appendChild(skaly);
	var napravlenie = random(8); 
	if(napravlenie == 1) {
		skaly.className = "skaly a";
	} else if(napravlenie == 2) {
		skaly.className = "skaly b";
	} else if(napravlenie == 3) {
		skaly.className = "skaly c";
	} else if(napravlenie == 4) {
		skaly.className = "skaly d";
	} else if(napravlenie == 5) {
		skaly.className = "skaly e";
	} else if(napravlenie == 6) {
		skaly.className = "skaly f";
	} else if(napravlenie == 7) {
		skaly.className = "skaly g";
	} else {
		skaly.className = "skaly h";
	}
	skaly.style.display = "block";
	setTimeout(function(){
		skaly.style.transition = "all 0s";
		var timerSkal = setInterval(function(){
			skaly.style.top = skaly.offsetTop + 1 + "px";
			if ( skaly.offsetTop > 600) {
				skaly.remove();
				poyavlenieSkal();
			}
			if(
				((Korabl.offsetLeft + Korabl.offsetWidth >= skaly.offsetLeft) &&
				 (Korabl.offsetLeft <= skaly.offsetLeft + skaly.offsetWidth)) &&
				((Korabl.offsetTop + Korabl.offsetHeight >= skaly.offsetTop) &&
				 (Korabl.offsetTop <= skaly.offsetTop + skaly.offsetHeight))

			) {
				console.log("yes");
			}
		},0);
	},0);
}

function poyavlenieMoney() {
	var money = document.createElement("div");
	money.id = "skaly";
	more.appendChild(money);
	var napravlenie = random(8); 
	if(napravlenie == 1) {
		money.className = "money a";
	} else if(napravlenie == 2) {
		money.className = "money b";
	} else if(napravlenie == 3) {
		money.className = "money c";
	} else if(napravlenie ==...