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 behaviors = {
        '39': { prop:"left", value: 50 },
        '37': { prop:"left", value: -50 },
        '40': { prop:"top", value: 50 },
        '38': { prop:"top", value: -50 }
    };

    function move() {
        if ( isRun || !queue.length ) return;
        var key = queue.shift();
        var behavior = behaviors[key];
        var position = block.position();
        var value = position[behavior.prop];
        var prop = {};
        value += behavior.value;
        value = Math.max(value, 0);
        value = Math.min(value, 450);
        prop[behavior.prop] = value;
        isRun = true;
        block.animate(prop, "slow", function() {
            isRun = false;
            move();
        });
    }

    $document.keydown(function(event) {
        behaviors[event.keyCode] && queue.push(event.keyCode);
        isRun || move();
    });
});