Question 46224 in Html Question posted in
Some basic documentation can be found here.

How to find the left of an element in JS – Html

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got it.

        <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
   <body>
        <img src="Demo tank.png" style="position: absolute;left: 0%;display: none;" id="1">
         <img src="Demo tank.png" style="position: absolute;left: 95%;display: none;" id="2">
       <button onclick="mrmove()" id="left">Left</button>
       <button onclick="msmove()" id="right">Right</button>
     <script>
          function mrmove() {
            mrmove = nothing;
                 var enem = document.getElementById("2");
                   var elem = document.getElementById("1");
                var width1 = 1;
                var enemwidth = enem.style.left;
               var id = setInterval(frame, 100);
                function frame() {
               if (elem.style.left == enem.style.left) {
                    clearInterval(id);
                } else {
                        width1++;
                 elem.style.left = width1 + '%';
                  elem.style.display = 'block';
                    //console.log(elem.style.left);
                  }
                }
              }
                 function msmove() {
                msmove = nothing
                  var enem = document.getElementById("2");
                   var elem = document.getElementById("1");
                  var width2 = 1;
                  var enemwidth = enem.style.left;
                var id = setInterval(frame, 100);
                  var dif = enem.style.left - elem.style.left;
                function frame() {
                  if (elem.style.left == enem.style.left) {
                      clearInterval(id);
                 } else {
                   width2++;
                    enem.style.left = 95 - width2 + '%' ;
                    enem.style.display = 'block';
                        //console.log(elem.style.left);
                           }
                                    }
                        }
                    function nothing(){}
                       </script>
      </body>
    </html>

  2. 0

    You may be looking for getBoundingClientRect

    elem.getBoundingClientRect().left

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search