JSFiddle - React, Tailwind, and code Playground

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: green;
}

#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;
		-webkit-transition: bottom 0.5s ease-in-out;
		-moz-transition: bottom 0.5s ease-in-out;
		-ms-transition: bottom 0.5s ease-in-out;
		-o-transition: bottom 0.5s ease-in-out;
		transition: bottom 0.5s ease-in-out;
}

JavaScript

var isRunning = false,
    runDirection = '',
    speed = 5;

var run = function() {
        if (!isRunning)
            return;
        var $canvas = $("#canvas");
        if (parseInt($canvas.css('marginLeft')) > -speed && runDirection == '+')
            return;
        
        $("#canvas").animate({
            marginLeft: runDirection + "=5" + speed + "px"
        }, 100, run);
    },
    startRunning = function(dir) {
        runDirection = dir;
        if (!isRunning) {
            isRunning = true;
            run();
        }     
    },
    stopRunning = function() {
        isRunning = false;
    };

$(document).keydown(function(event) {
    console.log("Key pressed: " + event.keyCode);

    if(event.keyCode == 39) {
        event.preventDefault();
        startRunning('-');
    }

    if(event.keyCode == 37) {
        event.preventDefault();
        startRunning('+');
    }

    if(event.keyCode == 32) {
        event.preventDefault();
        setTimeout(function() {
        $("#man").css("bottom", "300px");
        setTimeout(function() {
        $("#man").css("bottom", "100px");
        },500);},0); 
    }
}).keyup(function(event) {
    if (event.keyCode == 39 || event.keyCode == 37)
        stopRunning();
});