JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <script>
function moveObj(obj, Xpix, Ypix) {   
    obj.style.left = parseInt(getStyleProp(obj,'left')) + Xpix+"px";
    obj.style.top= parseInt(getStyleProp(obj,'top')) + Ypix + "px";
}

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
        
function ProcessKeypress(e) {
    var myObj = document.getElementById("snake");
    var moveBy = 10;
    switch(e.charCode) {
        case 97: moveObj(myObj, -moveBy, 0); break;
        case 100: moveObj(myObj, moveBy, 0); break;
        case 115: moveObj(myObj, 0, moveBy); break;
        case 119: moveObj(myObj, 0, -moveBy); break;            
    }
}        
    </script>
</head>
<body onKeyPress="ProcessKeypress(event);">
<p><img id="snake" src="http://www.google.com/logos/2012/Mies_Van_der_Rohe-2012-hp.jpg"></p>
</body>

CSS

#snake {
    border: 1px #000 solid;
z-index: 0;
left: 30px; 
position: absolute; 
top: 25px;
}