JSFiddle - React, Tailwind, and code Playground

HTML

<div class="board">
		<div class="block"></div>
</div>

CSS

.board {
		width: 500px;
		height: 500px;
		background: #ccc;
		position: relative;
	}
.block { 
		background: #000;
		position: absolute;
		width: 50px; height: 50px;
		left: 0; top: 0;
}

JavaScript

var $document = $(document);

$document.ready(function() {
    var block = $(".block");
    var isRun = false;
    var queue = [];
    var keys = {
        '39': { "left": "+=50px" },
        '37': { "left": "-=50px" },
        '40': { "top": "+=50px" },
        '38': { "top": "-=50px" }
    };
    
    function move() {
        if ( isRun ) return;
        var position = block.position();
        var key = queue.shift();
        var prop = keys[key];
        // TODO: animate
    }
    
    $document.keydown(function(event) {
        queue.push(event.keyCode);
        isRun || move();
    });
});