JS with keyboard: Simple Point

Press up-arrow to jump, left to go left and right to go right.

by Kevin Pliester

HTML

<div class="container">
    <div id="dot"></div>
</div>

CSS

.container {
	    margin: 5% auto;
	    position: relative;
	    min-height: 500px;
	    border: 5px solid #333;
	}
	
	#dot {
	    width: 50px;
	    height: 50px;
	    background: #333;
	    border-radius: 500%;
	    transition: all .2s linear;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	}

JavaScript

$('body').keyup(function(e) {
	    if (e.keyCode == 32 || e.keyCode == 38) {
	        dotUp();
	        setTimeout(dotDown, 200);
	    }
	    if (e.keyCode == 39) {
	        dotRight();
	    }
	    if (e.keyCode == 37) {
	        dotLeft();
	    }
	});

	function dotRight() {
	    $("#dot").css("left", "+=30");
	}

	function dotLeft() {
	    $("#dot").css("left", "-=30");
	}

	function dotUp() {
	    $("#dot").css("bottom", "15%");
	}

	function dotDown() {
	    $("#dot").css("bottom", "0%");
	}