есть два блока - Img, которым является мяч и ворота, которые являются блоком с классом gate, при помощи рандомного подбора x и Y мяч может попасть в ворота, а может и нет. Как написать проверку, что мяч попадает в ворота?
const ball = $("#img");
const gate = $(".gate");
ball.click(function (e) {
let x = Math.floor(Math.random() * 51) + 45 + "%";
let y = Math.floor(Math.random() * 85) + "%";
if (ball.hasClass("moved")) {
alert("press reset button to play again");
} else {
ball.animate(
{
left: x,
bottom: y,
},
{
duration: 1200,
complete: function () {
console.log(ball.position(), gate.position());
},
}
);
ball.css("transition", "transform 1.2s ease");
ball.addClass("rotated");
ball.addClass("moved");
}
});
<body>
<div class="container col-12">
<div class="container col-10 con">
<img src="ball.png" alt="" class="img" id="img">
<div class="line"></div>
<div class="gate"></div>
</div>
<button class="btn-danger btn reset">Reset</button>
</div>
</body>
