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;
left: 100px;
}
.blok {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background-color: green;
}
JavaScript
$(document).keydown(function(event) {
if(event.which == 37) {
$(".gamer").animate({"left" : "-=50px"});
check();
}
if(event.which == 39) {
$(".gamer").animate({"left" : "+=50px"});
check();
}
});
function check () {
var redCube = $(".gamer");
var greenCube =$(".blok");
var rightRed = redCube.offset().left + 50;
var leftRed = redCube.offset().left;
var leftGreen = greenCube.offset().left;
var rightGreen = greenCube.offset().left + 50;
if (rightRed > leftGreen){
alert(rightRed);
}
}