title: multiple DIV collision detection in Javascript/JQuery
body: <p>Working on a little "zombies" or "tag you're it" or "ew! you got cooties"-styled game where each AI object (a person, basically) runs around randomly. There is an initial object that is "it" or "infected" and as it moves about the screen and touches/overlaps/collides with another object it should change the touched object to the same color as the object that touched it.  Newly infected objects can continue to infect other objects they randomly collide with, until - in principle - the whole population is the same color as the first infected object.  (I'll worry about fancier AI where infected actively hunt nearby objects or healthy objects can avoid infected objects, later).</p>
  
  <p>But after looking at various similar questions in StackOverflow that generally deal with 2 DIVs colliding, or use some sort of jQuery draggable detection trick, I'm still at a bit of a loss as to how to build upon those ideas to scale up a simple "if I am touching/overlapping/colliding with another object it should get infected too" that can be applied to a large number of elements on the page, say... less than 100 so as not to drag the browser down.</p>
  
  <p>I basically get as far as determining position and widths/heights of the objects so that I know how much space they take, but then the brain goes 'bzzzzt' when trying to develop a function that checks over all the population for collisions.</p>
  
  <p>Got the population moving around randomly without trouble - see JSFiddle <a href="https://jsfiddle.net/digitalmouse/5tvyjhjL/1/" rel="nofollow">https://jsfiddle.net/digitalmouse/5tvyjhjL/1/</a> for the related code.  Affected function should be in the 'animateDiv()', seen below to make the stackoverflow question asking editor happy that I included some code in my question. :)</p>
  
  <pre><code> function animateDiv($target) {
       var newq = makeNewPosition($target.parent());
       var oldq = $target.offset();
       var speed = calcSpeed([oldq.top, oldq.left], newq);
  
       // I believe collision should be dealt with here,
       // just before moving an object
  
       $target.animate({
           top: newq[0],
           left: newq[1]
       }, speed, function () {
           animateDiv($target);
       });
   }
  </code></pre>
  
  <p>Any hints, tricks, adaptations, or code snippets that push me in the right direction are appreciated.</p>