I am just trying to make a game using JS. The problem is if one image collides with the other image, I want to stop an animation. I tried to stop if both images have the same left but still not working. Here’s my code
function mrmove() {
var enem = document.getElementById("2");
var elem = document.getElementById("1");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width == elem.style.left) {
clearInterval(id);
} else {
width++;
elem.style.left = width + '%';
console.log(elem.style.left);
}
}
}
function msmove() {
var enem = document.getElementById("2");
var elem = document.getElementById("1");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width == elem.style.left) {
clearInterval(id);
} else {
width++;
enem.style.left = 70 - width + '%' ;
console.log(elem.style.left);
}
}
}
In this an image moves forward while the other moves backward.
2
Answers
I got it.
You may be looking for
getBoundingClientRect
Doc:https://developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect