JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://images.wikia.com/metalgear/images/1/1a/SolidSnake.png" id="character">
</img>

CSS

body{
    background:#444;
    
}
#character
{
     height: 150px;
width:80px;
    position:absolute;
    top:40px;left:40px;
}

JavaScript

var righKey, leftKey, downKey, upKey,spaceBar;
var box=$("#character"),
    left=37,
right=39,
    up=38,
    down=40,
    space=32;

function key(e) {
    console.log(e.keyCode);
    var $key = e.keyCode;

    
    $(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(){
   key(event); 
});

setInterval (function(){
    if(upKey)
    {
        box.css("top","-=10");
    }
    if(downKey)
    {
        box.css("top","+=10");
    }
    if(rightKey)
    {
        box.css("left","+=10");
    }
    if(leftKey)
    {
        box.css("left","-=10");
    }
    if(spaceBar)
    {
        box.stop(true,false).animate({top:"-50"},100, function(){
            box.animate({top:"50"},100);
        })
        

    }
},20);