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() {
    console.log(1);
}

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

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