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.

>Solution :

You may be looking for getBoundingClientRect

elem.getBoundingClientRect().left

Doc:https://developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect