JSFiddle - React, Tailwind, and code Playground

by betinhocrazy

HTML

<div id="outside">
	<div id="cube">
	    
	</div>
</div>

CSS

#outside {
	border: 1px solid black;
	height: 402px;
	width: 402px;
	margin: auto;
    position:relative;
}


#cube {
	background: green;
	height: 50px;
	width: 50px;
	border: 1px solid blue;
	position: relative;
	bottom: 0;
    left:0;
    border-radius: 50%;
    box-shadow: 0 0 10px #000
}

JavaScript

$(document).ready(function(){
	$(document).keydown(function(e) {
        var cube = $("#cube");
        var leftMargin = 0;
        var rightMargin = $('#outside').position().left + $('#outside').width() - cube.width();
        var topMargin =0;
        var bottomMargin = $('#outside').position().top + $('#outside').height() - cube.height();
      	switch (e.which) {
		case 37: // Left
                var newLeft = parseInt(cube.position().left - 50);
               if(leftMargin <= newLeft)
                {
			        cube.css("left", newLeft);
                }
			break;
		case 38: // Up
                var newTop = parseInt(cube.position().top - 50);
                if(topMargin <= newTop)
                {
			        cube.css("top",newTop);
                }
			break;
		case 39: // Right
                var newRight = (cube.position().left + 50);
                 if(rightMargin > newRight)
                {
			        cube.css("left", newRight);
                }
			break;
		case 40: // Down
                var newBottom = parseInt(cube.position().top + 50);
                if(bottomMargin > newBottom)
                {
			        cube.css("top", newBottom);
                }
			break;
		}
	});
    var cube = $("#cube");
    function animateCube() {
        cube.animate({"left": "+=300px"}, "slow");        
        cube.animate({"top": "+=300px"}, "slow");        
        cube.animate({"left": "-=300px"}, "slow");        
        cube.animate({"top": "-=300px"}, "slow");
       
    };
//    setInterval(("animateCube()",1000))
    
    setInterval(function(){animateCube()},100)
    
    //setInterval("animateCube()")
});