skip to Main Content

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


  1. Chosen as BEST ANSWER

    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. 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