JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="jumpOPP.css">
 <script src="jumpOPP.js"></script>

 <body>
 <img id="rogue" src="http://piq.codeus.net/static/media/userpics/piq_143310_400x400.png" >

CSS

#rogue {
    position: relative;
    top: 0px;
    left: 0px;
}

JavaScript

document.body.onkeydown = function(event){
        var k = event.keyCode; 
    var chr = {
        updown: function (){
            var y = 0;
            if (k==38)  {
                --y;
            } else if (k == 40) {
                ++y;
            }
            return y; 
        },
        leftright: function (){
            var x = 0;
            if (k == 37) {
                --x;
            } else if (k == 39) {
                ++x;
            }
            return x; 
        }
    };

    rogue.style.top = (chr.updown()) + "px";
    rogue.style.left = (chr.leftright()) + "px";
};