title: Javascript enemies follow player
body: <p>I am coding a lil js game for a university project.
  I have a 2d map and I can move my player with arrows. Enemies are spawned every 5 seconds and they are guided by the function:</p>
  
  <pre><code>enemy.updatePosition = function() {
      if(enemy.isAttacking === false) {           
              var diffX = Math.floor(player.x - enemy.x);
              var diffY = Math.floor(player.y - enemy.y);
  
              //security distance by player --&gt; superEnemy type 1 uses arrows
              var distance = getDistanceBetweenEntities(player, enemy);
              var gap = 20;
  
  
              enemy.pressingRight = diffX &gt; gap;
              enemy.pressingLeft = diffX &lt; -gap;
              enemy.pressingDown = diffY &gt; gap;
              enemy.pressingUp = diffY &lt; -gap;
  
              enemy.isStopped = false;
  
  
                  if(enemy.speedX &lt; 0)
                      enemy.speedX = - enemy.speedX;
                  if(enemy.speedY &lt; 0)
                      enemy.speedY = - enemy.speedY;
                  //bumpers check if hitting a wall or end of map
                  var rightBumper = {x:enemy.x + 15, y:enemy.y};
                  var leftBumper = {x:enemy.x - 15, y:enemy.y};
                  var upBumper = {x:enemy.x, y:enemy.y - 25};
                  var downBumper = {x:enemy.x, y:enemy.y + 20};
  
                  if(currentMap.isPositionWall(rightBumper)) {
                      enemy.x -= 1;
                  } else {
                      if(enemy.pressingRight)
                          enemy.x += enemy.speedX;
                  }
                  if(currentMap.isPositionWall(leftBumper)) {
                      enemy.x += 1;
                  } else {
                      if(enemy.pressingLeft)
                          enemy.x -= enemy.speedX;
                  }
  
                  if(currentMap.isPositionWall(downBumper)) {
                      enemy.y -= 1;
                  } else {
                      if(enemy.pressingDown)
                          enemy.y += enemy.speedY;
                  }
                  if(currentMap.isPositionWall(upBumper)) {
                      enemy.y += 1;
                  } else {
                      if(enemy.pressingUp)
                          enemy.y -= enemy.speedY;
                  }
  
                  //set position again if the center of the draw 
                  //of enemy goes out of map's limits
                  if(enemy.x  &lt; enemy.width/2)
                      enemy.x  = enemy.width/2;
                  if(enemy.x  &gt; currentMap.width - enemy.width/2)
                      enemy.x  = currentMap.width - enemy.width/2;
                  if(enemy.y &lt; enemy.height/2)
                      enemy.y = enemy.height/2;
                  if(enemy.y &gt; currentMap.height - enemy.height/2)
                      enemy.y = currentMap.height - enemy.height/2;
  
          }
      }
  }
  </code></pre>
  
  <p>So my enemies follow the player with the values of diffX and diffY. Each enemy has it own speedX and speedY, something like:</p>
  
  <pre><code>    var random = 1 + Math.random()*7;   //from 1 to 8
      enemy.speedX = random;
      enemy.speedY = random;
  </code></pre>
  
  <p>The result is that enemies start to overlap, expecially when they are performing an attack(x and y don't changes during attack). Is there a simple way to avoid that without checking a lot of collision? Thanks everyone</p>