JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

	
	
	<body>
	<h1 id="titel">Grymmaste spelet!</h1>
	<div id="spelplan">
			<div id="tid" > 0.0 </div>
			<button id="knapp"> Starta spelet </button>
			
			<img id="spelare1" src="bilder/sparrmanhuvud.png" alt="Sparrmans Huvud">
			
			
			
			<img id="cola1" class="cola_klass" src="bilder/cola_zero.png" alt="Kolaburk">
			<img id="cola2" class="cola_klass" src="bilder/cola_zero.png" alt="Kolaburk">
			<img id="cola3" class="cola_klass" src="bilder/cola_zero.png" alt="Kolaburk">
			<img id="cola4" class="cola_klass" src="bilder/cola_zero.png" alt="Kolaburk">
			<img id="cola5" class="cola_klass" src="bilder/cola_zero.png" alt="Kolaburk">
			

	</div>
			


			
		
	</body>

CSS

*{
	margin:0px;
	padding:0px;
	box-sizing: border-box;
	border:0;
	list-style-type:none;
}
body{
	background-color:white;
	width: 100%;
	height: 100vh;
}
#spelare1{
	width:75px;
	height:auto;
	position:absolute;
	top:25vh;
	left:45%;
	background-color:red;
	
}
#tid{
	position:absolute;
	background-color:white;
	height:45px;
	width:100px;
	z-index:3;
	float:right;
	
}
#spelplan{
	width:60%;
	height:60vh;
	position: absolute;
	background-color:black;
	left:20%;
	top:20vh;
	
	
}
#knapp{
	float:right;
}

#boll{
	width:4%;
	height:5vh;
	background-color:white;
	position:absolute;
	left:50%;
	top:50vh;
}
.cola_klass{
	position:absolute;
	width:40px;
	height:auto;
	
}

JavaScript

$(document).ready(function(){
			
			
			$(document).keydown(function(e){ 
				// Ner 
				if (e.keyCode ==40) {
					var spel1Top = $("#spelare1").position().top + $("#spelare1").height() ;
					var max = $("#spelplan").height();
					//console.log("max: " + max+ ", vår:" + spel1Top);
					if(spel1Top < max){
						$("#spelare1").animate({top: '+=5px'}, 1);
					}
				}
				// Upp 	
				else if (e.keyCode ==38){
					var spel1Top1 = $("#spelare1").position().top;
					//console.log("vår:" + spel1Top);
					if(spel1Top1 > 0){
						$("#spelare1").animate({top: '-=5px'}, 1);
					}
				}
				// Höger
				else if (e.keyCode ==39){
					var spel1Left = $("#spelare1").position().left + $("spelare1").width();
					var max = $("spelplan").position().left; + $("spelplan").width();
					
					//console.log(spel1Left + ", " + max);
					
					if(spel1Left < max){
						$("#spelare1").animate({left: '+=5px'}, 1);
					}
				}
				// Vänster
				else if (e.keyCode ==37){
					var spel1Left = $("#spelare1").position().left;
					if(spel1Left > 0){
						$("#spelare1").animate({left: '-=5px'}, 1);
					}
				}	
			});
			
			
			
			
			$(document).keyup(function(e){ 
				if (e.keyCode ==40) 
					$("#spelare1").clearQueue();
				else if (e.keyCode ==38) 
					$("#spelare1").clearQueue();
				
				else if (e.keyCode ==39) 
					$("#spelare2").clearQueue();
				else if (e.keyCode ==37) 
					$("#spelare2").clearQueue(); 
				
			});
			
			
			$("#knapp").click(function(){ 
			var startTime = Date.now();
	
			var interval = setInterval(function() {
				var elapsedTime = Date.now() - startTime;
				document.getElementById("tid").innerHTML = (elapsedTime / 1000).toFixed(1);
			}, 100);
			});
				



				
				var mintop = 0;
				var maxtop = 500;
				var minleft = 0;
				var maxleft = 1100;
			
				var randomTopPos1 = Math.floor(Math.random() * (maxtop - mintop + 1)) + mintop;
				var randomLeftPos1 = Math.floor(Math.random() * (maxleft - minleft + 1)) + minleft;
				
				var...