JSFiddle - React, Tailwind, and code Playground

by Erik Wegner

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="frame">
  <span id="o">[]</span>
</div>

CSS

#frame{
  width: 300px;
  height: 300px;
  background-color: yellow;
}
#o {
  position: absolute;
}

JavaScript

document.onkeydown = checkKey;

var obj = jQuery('#o');
var x = 100;
var y = 100;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
        y--;
    }
    else if (e.keyCode == '40') {
        // down arrow
        y++;
    }
    else if (e.keyCode == '37') {
       // left arrow
       x--;
    }
    else if (e.keyCode == '39') {
       // right arrow
       x++;
    }

	obj.css({left: x + "px", top: y + "px"});
}