JSFiddle - React, Tailwind, and code Playground
HTML
<p><img id="snake" src="http://www.google.com/logos/2012/Mies_Van_der_Rohe-2012-hp.jpg"></p>
CSS
#snake {
border: 1px #000 solid;
z-index: 0;
left: 30px;
position: absolute;
top: 25px;
}
JavaScript
$(document).on('keypress', ProcessKeypress);
function moveObj(obj, Xpix, Ypix) {
obj.css('left', parseInt(obj.css('left')) + Xpix);
obj.css('top', parseInt(obj.css('top')) + Ypix);
}
function ProcessKeypress(e) {
var myObj = $("#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;
}
}