JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div id="counter1" class="counter" >SCORE: <span id="score">0</span></div>
<div id="counter2" class="counter" >Missed: <span id="missed">0</span></div>
<div id="gameWindow" class="gameWindow">
<div id="player" class="player"></div>


</div>

CSS

.gameWindow
{
	width: 800px;
	height:800px;
	border: 1px solid black;
}
.player
{
	width:50px;
	height:50px;
	position: relative;
	top: 25px;
	left:  25px;
	background: blue;
}
.test
{
	width:50px;
	height:50px;
	position: absolute;
	background: red;
}
.laser
{
	width:25px;
	height:25px;
	position: absolute;
	background: url(enemy.png) 0 0;
}
.counter
{

}

JavaScript

$(document).ready(function()
		{
	
			
			
			
		
			var left1 = $("#num").position().left;
			var right1 = $("#num").position().left + $("#num").width();
			var top1 = $("#num").position().top;
			var bottom1 = $("#num").position().top + $("#num").height();
			//alert(left1 + " " + right1 + " " +top1 + " " +bottom1);
		
			$("#1").draggable({
			
			drag: function(event, ui){ 
				//alert(event);
				var left2 = $(this).position().left;
				var right2 = $(this).position().left + $(this).width(); 
				var top2 = $(this).position().top;
				var bottom2 = $(this).position().top + $(this).height();
				
				
				if(left2 < right1  && left2 > left1 && bottom2 >= top1 +1 && bottom2 <=bottom1)
				{	//alert(bottom2 + "  "  + top1);
					if(bottom2 > top1 + 5)
					{
						$("#1").css("left", right1 - 6);
					return false;
					}
					else if(bottom2 > top1 -5)
					{
							$("#1").css("top",  top1 - 10 - $(this).height());
					return false;
					}
				}
				else if(left2 < right1  && left2 > left1 && top2 > top1 && top2 < bottom1)
				{	//alert("2");
					if(top2 > bottom1 - 5)
					{
						$("#1").css("top", bottom1 -6);
					return false;
					}
					else if(top2 < bottom1 - 5)
					{
							$("#1").css("left",  right1 -6);
					return false;
					}
				}
				else if(right2 < right1 && right2 > left1 && top2 > top1 && top2 < bottom1)
				{	//alert("3");
					if(top2 > bottom1 - 5)
					{
						$("#1").css("top", bottom1 - 6);
						return false;
					}
					else if(bottom2 > bottom1 + 5)
					{
						$("#1").css("left",  left1 - 10 -$(this).width());
						return false;
					}
				}
				else if(right2 < right1 && right2 > left1 && bottom2 < bottom1 && bottom2 > top1) 
				{	//alert("4");
					if(bottom2 > bottom1 + 5)
					{
						$("#1").css("top", "+=2px");
					return false;
					}
					else if(bottom2 > bottom1 - 5)
					{
							$("#1").css("left",  "-=2px");
					return false;
					}
				}

			}
			
			});
			
			var counter =...