JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://community.spiceworks.com/images/users/0010/6329/_p_stickman.png"
id="character"></img>
<div class="block"></div>

CSS

body {
    background:white;
}
#character {
    height: 100px;
    width:100px;
    position:absolute;
    bottom:0;
    left:40px;
}
canvas {
    height:200px;
    width:100%;
}
.block {
    height:50px;
    width:100px;
    background:black;
    position:absolute;
    bottom:0;
    left:50%;
}

JavaScript

var righKey, leftKey, downKey, upKey, spaceBar;
var box = $("#character"),
    left = 37,
    right = 39,
    up = 38,
    down = 40,
    space = 32;
var xPos = box.offset().top;
//console.log(box.offset().top);
var rightKey = false;
var leftKey = false;
var upKey = false;
var downKey = false;
var spaceBar = false;

function key(e) {

    var $key = e.keyCode;
    rightKey = false;
    leftKey = false;
    upKey = false;
    downKey = false;
    spaceBar = false;



    $(document).keydown(function (e) {

        if (e.keyCode == left) leftKey = true;

        if (e.keyCode == right) rightKey = true;


        if (e.keyCode == up) upKey = true;

        if (e.keyCode == down) downKey = true;

        if (e.keyCode == space) spaceBar = true;

    }).keyup(function (e) {

        if (e.keyCode == left) leftKey = false;

        if (e.keyCode == right) rightKey = false;

        if (e.keyCode == up) upKey = false;

        if (e.keyCode == down) downKey = false;

        if (e.keyCode == space) spaceBar = false;

    });

}


$("body").keydown(function (event) {
    key(event);
});

setInterval(function () {
    console.log('foo');

    if (downKey) {
        box.attr("src", "http://community.spiceworks.com/images/users/0010/6329/_p_stickman.png");
    }
    if (rightKey) {
        box.css("left", "+=10");
        box.attr("src", "http://mountdouglas.ca/webusers/mdinfotech/examples/ICTP%2011%20Websites/2007-8%20Semester%201/Flash%20Animation/images/extutpics/walktut/stickman1.jpeg");
    }
    if (leftKey) {
        box.css("left", "-=10");
        box.attr("src", "http://www.swaggermusiq.com/wp-content/uploads/2013/01/stickman.png");
    }
    if (spaceBar) {
        box.stop(true, false).animate({
            top: xPos - 50
        }, 10, function () {
            box.animate({
                top: xPos
            }, 100);
        });


    }
}, 20);