title: How to have an element follow a dynamic moving element?
body: <p>Okay, so I got most of this done. Here is the code:</p>
  
  <pre><code>function gi(a) {
      return document.getElementById(a)
  }
  gameworld = document.getElementById('GameWorld');
  character = document.getElementById('character');
  var oldvX = 30;
  var oldvY = 30;
  
  gameworld.addEventListener('click', function(e) {
      var offsetX = e.offsetX;
      var offsetY = e.offsetY;
  
      var element = e.target;
      character.style.left = offsetX + 'px';
      character.style.top = offsetY + 'px';
  });
  
  
  setInterval(function() {
      monster = gi('monster');
      oldvX += 10;
      oldvY += 10;
      gb = gameworld.getBoundingClientRect();
      cb = character.getBoundingClientRect();
  
      oldvX += cb.left / 10;
      oldvY += cb.top / 10;
      if (oldvX &gt;= (cb.left)) {
  
          return
      }
      if (oldvY &gt;= (cb.top)) {
  
          return
      }
  
      monster.style.left = oldvX + 'px';
      monster.style.top = oldvY + 'px';
  
  }, 500);
  </code></pre>
  
  <p>And here is the jsfiddle:
  <a href="https://jsfiddle.net/g43nxhcw/12/" rel="nofollow">https://jsfiddle.net/g43nxhcw/12/</a></p>
  
  <p>As you can see, the monster is making its way towards the player via the players' <code>getBoundingClientRect()</code>. My dilemma is: When I move around the red square, the monster is not following my character. I am not sure how to accomplish this or if this is even possible.</p>