JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.gamer, .blok {
	position: absolute;
    top: 50%;
	width: 50px;
    height: 50px;
    background-color: red;
}
.blok {
    left: 50%;	
    background-color: green;
}

JavaScript

function my_event() {
    alert('my event');
}

function check_event(a) {
    var c = parseInt($(".gamer").css( "left" ))-parseInt($(".blok").css( "left" ))+a;
    if (c>-50 && c<50) {
        my_event();
    }
}

$(document).keydown(function(event) {
		
		if(event.which == 37) {
            $(".gamer").animate({"left" : "-=50px"});
            check_event(-50);
		}
			
		if(event.which == 39) {
			$(".gamer").animate({"left" : "+=50px"});
            check_event(50);
		}
		
		
});