Detect collision: lots of boxes

http://stackoverflow.com/questions/29916874/can-you-tell-if-one-element-is-touching-another-using-javascript/29959520#29959520

by Gerald Fullam

HTML

<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
<div id="box5" class="box">5</div>
<div id="box6" class="box">6</div>
<div id="box7" class="box">7</div>
<div id="box8" class="box">8</div>
<div id="box9" class="box">9</div>
<div id="box10" class="box">10</div>
<div id="box11" class="box">11</div>
<div id="box12" class="box">12</div>
<div id="box13" class="box">13</div>
<div id="box14" class="box">14</div>
<div id="box15" class="box">15</div>
<div id="box16" class="box">16</div>
<div id="box17" class="box">17</div>
<div id="box18" class="box">18</div>
<div id="box19" class="box">19</div>
<div id="box20" class="box">20</div>
<div id="box21" class="box">21</div>
<div id="box22" class="box">22</div>
<div id="box23" class="box">23</div>
<div id="box24" class="box">24</div>
<div id="box25" class="box">25</div>
<div id="box26" class="box">26</div>
<div id="box27" class="box">27</div>
<div id="box28" class="box">28</div>
<div id="box29" class="box">29</div>
<div id="box30" class="box">30</div>
<div id="box31" class="box">31</div>
<div id="box32" class="box">32</div>
<div id="box33" class="box">33</div>
<div id="box34" class="box">34</div>
<div id="box35" class="box">35</div>
<div id="box36" class="box">36</div>
<div id="box37" class="box">37</div>
<div id="box38" class="box">38</div>
<div id="box39" class="box">39</div>
<div id="box40" class="box">40</div>
<div id="box41" class="box">41</div>
<div id="box42" class="box">42</div>
<div id="box43" class="box">43</div>
<div id="box44" class="box">44</div>
<div id="box45" class="box">45</div>
<div id="box46" class="box">46</div>
<div id="box47" class="box">47</div>
<div id="box48" class="box">48</div>
<div id="box49" class="box">49</div>
<div id="box50" class="box">50</div>
<div id="box51" class="box">51</div>
<div id="box52" class="box">52</div>
<div id="box53" class="box">53</div>
<div id="box54" class="box">54</div>
<div id="box55"...

CSS

.box {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: -15px;
    color: White;
    font: bold 60px sans-serif;
    line-height: 90px;
    text-align: center;
    cursor: pointer;
}
.box:nth-of-type(4n+1) {
    background-color: SlateGray;
}
.box:nth-of-type(4n+2) {
    top: 30px;
    left: -30px;
    background-color: SandyBrown; 
}
.box:nth-of-type(4n+3) {
    left: -45px;
    background-color: SkyBlue;
}
.box:nth-of-type(4n+4) {
    top: 30px;
    background-color: LightSeaGreen;
}
.box:hover {
    color: Black;
}

JavaScript

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].addEventListener) {
        boxes[i].addEventListener('click', clickHandler);
    } else {
        boxes[i].attachEvent('onclick', clickHandler);
    }
}

var detectOverlap = (function () {
    function getPositions(elem) {
        var pos = elem.getBoundingClientRect();
        return [[pos.left, pos.right], [pos.top, pos.bottom]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function (a, b) {
        var pos1 = getPositions(a),
            pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    };
})();

function clickHandler(e) {
    var elem     = e.target,
        elems    = document.querySelectorAll('.box'),
        elemList = Array.prototype.slice.call(elems),
        within   = elemList.indexOf(elem),
        touching = [];
    if (within !== -1) {
        elemList.splice(within, 1);
    }
    for (var i = 0; i < elemList.length; i++) {
        if (detectOverlap(elem, elemList[i])) {
            touching.push(elemList[i].id);
        }
    }
    if (touching.length) {
        alert(elem.id + ' touches ' + touching.join(' and ') + '.');
    } else {
        alert(elem.id + ' touches nothing.')   
    }

}