JSFiddle - React, Tailwind, and code Playground

by Valtos

HTML

<body>
	<div id="canvas">
        <div id="grass"></div>
        <div id="box"></div>
        <div id="man"></div>
	</div>
</body>

CSS

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#canvas {
	position: relative;
	min-width: 2500px;
	height: 100%;
}

#grass {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: #c9de96; /* Old browsers */
background: -moz-linear-gradient(left, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
background: linear-gradient(to right, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 */
}

#box {
	position: absolute;
	bottom: 100px;
	left: 2000px;
	width: 100px;
	height: 100px;
	background: brown;
}

#man {
	position: fixed;
	bottom: 100px;
	left: 200px;
	width: 73px;
	height: 161px;
	background-image: url(http://i58.tinypic.com/dz9g9h.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

JavaScript

var canvas = $("#canvas");
var man = $("#man");

var keyStack = {};

$(document).keydown(function (e) {
    keyStack[e.keyCode] = true;
});

$(document).keyup(function (e) {
    delete keyStack[e.keyCode];
});

updateCanvas = function() {
    //is key 39 pressed?
    if(keyStack[39]) {
        canvas.stop().animate({
            marginLeft: "-=10px"
        }, 1);
    }
    //is key 37 pressed?
    if(keyStack[37]) {
        if(canvas.css('margin-left') < '0px') {
            canvas.stop().animate({
                marginLeft: "+=10px"
            }, 1)
        }
    }
    //is key 32 pressed?
    if(keyStack[32]) {
        if(!man.data('lock')) {
            man.data('lock', true);
            man.stop().animate(
                {
                    bottom: "300px"
                },
                500,
                function() {
                    man.stop().animate({
                        bottom: "100px"
                    }, 400, function() {
                        man.data('lock', false);   
                    });
                }
            );
        }
    }
    
    //create a loop
    setTimeout(updateCanvas, 10);
};

updateCanvas();