JSFiddle - React, Tailwind, and code Playground

by coolking

HTML

<!DOCTYPE html>
    <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
<body onload='init()'>
    <canvas id="main"></canvas>
    <div id="objects">
<div id='obj' name="obj_1" class="obj_49" style='top:100px;left:100px;'><img onmousedown='return false;' src ="http://dl.dropbox.com/u/8015538/example/1.png" /></div>  
<div id='obj' name="obj_1" class="obj_55"  style='top:125px;left:125px;'><img onmousedown='return false;'  src ="http://dl.dropbox.com/u/8015538/example/1.png" /></div> 
<div id='obj' name="obj_1" class="obj_22"  style='top:150px;left:150px;'><img onmousedown='return false;'  src ="http://dl.dropbox.com/u/8015538/example/1.png" /></div> 
<div id='obj' name="obj_1" class="obj_43"  style='top:150px;left:100px;'><img onmousedown='return false;'  src ="http://dl.dropbox.com/u/8015538/example/1.png" /></div> 
<div id='obj' name="obj_1" class="obj_76"  style='top:200px;left:200px;'><img onmousedown='return false;'  src ="http://dl.dropbox.com/u/8015538/example/1.png" /></div> 
    <div id='fol'><img id="follower" src='http://dl.dropbox.com/u/8015538/example/5.png' /></div></div>
</body>
</html>

CSS

#obj {
position: absolute;
}
#build {
position: absolute;
}
#main {
width: 100%;
height: 500px;
background-image:url('http://dl.dropbox.com/u/8015538/example/grass.png');
}
#fol {
position: absolute;
}

JavaScript

var overlaps = (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] );
    };
})();


function mouseClick(e) {
    var x = e.pageX;
    var y = e.pageY;
    
    var objs = $( '#objects' )[0],
        obj = $( '#fol' )[0],
        html, col = 0;
    $( objs ).children().not( obj ).map( function ( i ) {
        if(overlaps( obj, this )) {
            col = 1;
           $(this).remove();
        }
    }).get();
    $("body").append("<div id='obj' style='top: " + y + "px; left: " + x + "px;' onmousedown='return false;'><img src = 'http://dl.dropbox.com/u/8015538/example/5.png' /></div>");
}
function mouseCheck(e) {
    var x = e.pageX;
    var y = e.pageY;
    $('#fol').css({
        top: y,
        left: x
    });
    
}

function init() {
    canvas = document.getElementById('main')
    follower = document.getElementById('follower')
    canvas.addEventListener("mousemove", mouseCheck, false);
    canvas.addEventListener("mousedown", mouseClick, false);
    follower.addEventListener("mousemove", mouseCheck, false);
    follower.addEventListener("mousedown", mouseClick, false);
    $('div[class^=obj_]').mousemove(function(e) {
        mouseCheck(e)
    });
        $('div[class^=obj_]').click(function(e) {
        mouseClick(e)
    });
    ;
}