JSFiddle - React, Tailwind, and code Playground

HTML

<div class = gamer> </div>
<div class = blok> </div>

CSS

.gamer {
	
position: absolute;

top: 50%;
	
width: 50px;
height: 50px;
background-color: red;	
		
}

.blok {
	
position: absolute;

top: 50%;
left: 50%;	
width: 50px;
height: 50px;
background-color: green;	
		
}

JavaScript

var redBlock = jQuery('.gamer');
var greenBlock = jQuery('.blok');
var duration = 300;
var isBusy = false;

jQuery(document).keydown(function(e) {
	var stepOffset = 0;
	switch(e.which) {
		case 37:
			stepOffset = '-=50px';
			break;
		case 39:
			stepOffset = '+=50px';
			break;
	}

	redBlock.stop().animate({
		left: stepOffset
	}, {
		duration: duration,
		step: checkTarget,
		complete: function() {
			isBusy = false;
		}
	});
});

function checkTarget() {
	if(isBusy) return;
	var redOffsetX = redBlock.offset().left;
	var redOffsetY = redBlock.offset().left;
	var redWidth = redBlock.width();
	var redHeight = redBlock.height();
	var greenOffsetX = greenBlock.offset().left;
	var greenOffsetY = greenBlock.offset().left;
	var greenWidth = greenBlock.width();
	var greenHeight = greenBlock.height();

	if(
		(redOffsetX + redWidth > greenOffsetX && redOffsetX < greenOffsetX) ||
		(redOffsetY + redHeight > greenOffsetY && redOffsetY < greenOffsetY)
	) {
	    isBusy = true;
		alert(1);
	}
}