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='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> 
<img id="follower" src='http://dl.dropbox.com/u/8015538/example/5.png' />
</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');
}
#follower {
position: absolute;
}

JavaScript

function mouseClick(e) {
    var x = e.pageX;
    var y = e.pageY;
    $("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;
    $('#follower').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)
    });
}