title: How to make an element bounce back like pong game after been translated?
body: <p>I'm trying to make the translated element bounce back but it's just go out the screen, here's the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="m" width="40" height="40"&gt;
          &lt;circle cx="20" cy="20" r="20" fill="red" stroke="red" stroke-width="1"/&gt;
      &lt;/svg&gt;
      
      &lt;script&gt;
  let m = document.getElementById("m");
  
  let start = function(e) {
    if(m.getBoundingClientRect().y&gt;window.innerHeight || m.getBoundingClientRect().y&lt;0){
        console.log("out")
        }
    else if(m.getBoundingClientRect().x&gt;window.innerWidth || m.getBoundingClientRect().x&lt;0){
        console.log("out")
        }
    
    m.style.transform = `translate(${e.x*2}px, ${e.y*2}px)`;
  };
  
  document.addEventListener("mousemove", e =&gt; start(e));
      &lt;/script&gt; </code></pre>
  </div>
  </div>
  </p>