JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div style="text-align: center" id="popupWin" class="windowEnd">
		<h2> Конец игры </h2>
		<hr>
		<h2> Статистика: </h2>
		<br> <p> Вы набрали .... очков</p>
		<hr>
		<form>
			<button class="button-end" width="10" height="5">ОК</button>
		</form>
	</div>

<div id="stage">
	<div id="square">
	<img src="kolpak.png" alt="">	
	</div>
	
</div>
<div class="container-button">
	<div>
		<button class="button-up" width="10" height="10">&#9650</button>
	</div>
	<div>
		<button class="button-left" width="10" height="10">&#9668</button>
		<button class="button-right" width="10" height="10">&#9658</button>
	</div>
	<div>
		<button class="button-down" width="10" height="10">&#9660</button>
	</div>
	<div class="info">
	<div class="counter">
		0
	</div>
		
	</div>
</div>
	<script src="script.js"></script>	
</body>
</html>

CSS

body {
	display: flex;
	
}
#stage {
	position: relative;
	width: 960px;
	height: 600px;
	background-color: azure;
	background-image: url(square.jpg);
}
#square {
	position: absolute;
	transition: all 0.5s;
	transform: translate(-50%, -50%);

}
.snowflake {
	position: absolute;
	transition: all 0.5s;
	transform: translate(-50%, -50%);
	background-image: url(snejinka.png);
	width: 128px;
	height: 128px;
	background-size: cover;
}

.fire {
	position: absolute;
	transition: all 0.5s;
	transform: translate(-50%, -50%);
	background-image: url(fire-clipart-torch-6.png);
	width: 100px;
	height: 100px;
	background-size: cover;
}
#square img {
	width: 150%;
	position: absolute;
	top: -50%;
	left: -40%;
}

.button-up {
	width: 100px;
	height: 100px;
	margin-left: 250px;
}
.button-down {
	width: 100px;
	height: 100px;
	margin-left: 250px;
}
.button-left {
	width: 100px;
	height: 100px;
	margin-left: 200px;
}
.button-right {
	width: 100px;
	height: 100px;
}
.button-up {
	width: 100px;
	height: 100px;
}

.counter {
	font-size: 55px;
    margin-left: 368px;
    margin-top: 49px;
}
.windowEnd { 
	height: 200px;  
	width: 300px;
	border: 3px outset gray; 
	background: wheat;
	top: 20%; /* отступ сверху */
	right: 0;
	left: 0;
	font-size: 14px; 
	margin: 0 auto;
	z-index:2; /* поверх всех */
	display: none;  /* сначала невидим */
	position: fixed; /* фиксированное позиционирование, окно стабильно при прокрутке */
	padding: 15px;
	border: 1px solid #383838;
}
#shadow { 
	position: fixed;
	width:100%;
	height:100%;
	z-index:1; /* поверх всех  кроме окна*/
	background:#000;
	opacity: 0.5; /*прозрачность*/
	left:0;
	top:0;
}

JavaScript

// настройка игры
var snowflakeCount=1;  	// счетчик снежинок
var fireCount=1;        //счетчик огоньков

var delta=128;     		// размер клетки по гориз. и вертикиле
var game={				// размер поля, кол-во клеток
	width: 8*delta,
	height: 6*delta,
	active: true,
}
var stageEl=document.querySelector('#stage'); 	// получили DOM элеммент
stageEl.style.height=game.height+'px';			// задание высоты DOM элеммента в px
stageEl.style.width=game.width+'px';       		// задание ширины DOM элеммента в px


// библиотека
function intersect(object1, object2){           // проверка пересечения двух объектов (имеют ли они одинаковые координаты)
	if (object1.x==object2.x && object1.y==object2.y){
		return true
	}
	return false
}

function createSquare(selector, x, y, size, color, radius){	// функция создания героя (колпачок - квадрат)

	var s={	// математическая модель
		x: x,
		y: y,
		size: size,
		color: color,
		radius: radius,
		el:document.querySelector(selector)
	}

	s.draw=function(){	// отрисовка математической модели в DOM-элемент (синхронизация с интерфейсом)
		s.el.style.left=s.x+'px';
		s.el.style.top=s.y+'px';
		s.el.style.width=s.size+'px';
		s.el.style.height=s.size+'px';
		s.el.style.background=s.color;
        s.el.style.borderRadius=s.radius+'%';
	}

	s.randomColor=function(){	// смена цвета на случайный
		var o = Math.round, r = Math.random, d = 255;
        s.color = 'rgba(' + o(r()*d) + ',' + o(r()*d) + ',' + o(r()*d) + ',' + r().toFixed(1) + ')';
	}

	s.moveY=function(deltaY){ 			// движение по y
		if (s.y+deltaY>game.height){	// предел по высоте (чтобы квадрат не выходил за сцену)
			return false;
		}
		if (s.y+deltaY<0){
			return false;
		}
		s.y+=deltaY;
	}

	s.moveX=function(deltaX){			// движение по x
		if (s.x+deltaX>game.width){		// предел по ширине (чтобы квадрат не выходил за сцену)
			return false;
		}
		if (s.x+deltaX<0){
			return false;
		}
		s.x+=deltaX;
	}
	return s;
}

function createRandomSnowflake(){     	// добавление снежинки в случайном...