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

$(document).ready(function() {
		var left, top
            $block = $('.block'),
            w = $block.outerWidth(true),
            h = $block.outerHeight(true);
        
		$(document).keydown(function(e) {
			switch (e.keyCode) {
				case 39: // вправо
					left = $block.position().left;
                    
                    if (left <= 450 - w) {
                        $block.animate({
                            "left": "+=50px"
                        }, {
                            "duration": "slow",
                            "complete": function() {
                                if (left <= 450 - w) {
                                    $block.clearQueue();
                                }
                            }
                        });
                    }
                    
					break;
				case 37: // влево
					left = $block.position().left;
                    
                    if (left >= w) {
                        $block.animate({
                            "left": "-=50px"
                        }, {
                            "duration": "slow",
                            "complete": function() {
                                if (left >= w) {
                                    $block.clearQueue();
                                }
                            }
                        });
                    }
                    
					break;
				case 40: // вниз
					top = $block.position().top;
					
                    if (top <= 450 - h) {
                        $block.animate({
                            "top": "+=50px"
                        }, {
                            "duration": "slow",
                            "complete": function() {
                                if (top <= 450 - h) {
                                    $block.clearQueue();
                                }
                            }
                        });
                    }
					
                   ...