JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div id="source">
    <div id="box1" class="collision-object"></div>
    <div id="box2" class="collision-object"></div>
    <div id="box3" class="collision-object"></div>
    
    <div id="box4" class="collision-object"></div>
    <div id="box5" class="collision-object"></div>
    <div id="box6" class="collision-object"></div>
    <div id="convert">Click Here To Convert</div>
</div>
<div id="canvas"></div>

CSS

#convert {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: grey;
    color: white;
}

#canvas, #source {
    display: block;
    float: left;
    width: 100%;
    height: 200px;
    border-bottom: 1px solid black;
}

.collision-object { 
    display: block;
    position: absolute;
    width: 100px; 
    height: 50px; 
}

#box1 { left: 10px; top: 10px; background-color: red; z-index: 1; }
#box2 { left: 30px; top: 30px; background-color: green; z-index: 2; }
#box3 { left: 50px; top: 50px; background-color: blue; z-index: 3; }

#box4 { left: 210px; top: 10px; background-color: red; z-index: 3; }
#box5 { left: 180px; top: 30px; background-color: green; z-index: 2; }
#box6 { left: 200px; top: 50px; background-color: blue; z-index: 1; }

JavaScript

// Collision Function
	var _collision = (function () {
	
        function getPositions(elem) {
            var pos, width, height;
            pos = $(elem).position();
            width = $(elem).width();
            height = $(elem).height();
            return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
        }

        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]);
        };

    })();
    
    $('#convert').click(function(e){
        e.stopImmediatePropagation();
        // Object Collision
        // Reset
        var collide = false;
        var collided = [];
        var collide_objs = [];
        var obj = [];
        
        $('.collision-object').each(function(i,v){
            obj.push( $(v).prop('id') );
        });
        
        $( obj ).each(function(i,v){
           collide_objs = [];
           collide = false;
            
            if ( collided.indexOf(v) >= 0 ) {
               return false;    
            }
            
            $('.collision-object')
            .each(function(ci,cv) {                
                if ( $(cv).prop('id') !== v ) {
                    if ( _collision($('#'+v), cv ) === true ) {
                        if ( collided.indexOf($(cv).prop('id')) < 0 ) {
                            collide_objs.push($(cv).prop('id'));
                            
                            if ( collide_objs.indexOf(v) == -1 ) {
                            	collide_objs.push(v);
                            }
                            
                            collided.push($(cv).prop('id'));
                            collide = true;
    ...