JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img id="rogue" src="http://i.imgur.com/8rawAdq.png" />
    </body>
</html>

CSS

#rogue {
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

document.body.onkeydown = function(event) {
    var rogue = document.getElementById('rogue');
    var currentY = parseInt(rogue.style.top || 0, 10);
    var currentX = parseInt(rogue.style.left || 0, 10);
    var speed = 3;

    switch (event.keyCode) {
        case 38: // up;
            rogue.style.top = (currentY - speed) + 'px';
            break;
        case 40: // down;
            rogue.style.top = (currentY + speed) + 'px';
            break;
        case 37: // left;
            rogue.style.left = (currentX - speed) + 'px';
            break;
        case 39: // right;
            rogue.style.left = (currentX + speed) + 'px';
            break;
    }
}