JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<h4>Drag images to do hit testing.<br>
(Open the console to view results)</h4>
<div id="container"></div>

CSS

body{padding:20px;}
#container{
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var shapes = [];

var testimg = new Image();
testimg.onload = start;
testimg.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png";

function start() {

    for (var i = 0; i < 4; i++) {
        var img = new Kinetic.Image({
            x: i * 75 + 15,
            y: i * 75 + 15,
            width: 60,
            height: 60,
            image: testimg,
            id: "img" + i,
            draggable: true
        });
        layer.add(img);

        img.on('dragend', function () {
            doObjectsCollide(this);
        });
        shapes.push(img);
    }
    layer.draw();
}

doObjectsCollide = function (a) {

    for (var i = 0; i < shapes.length; i++) {
        b = shapes[i];
        if (a.id() != b.id()) {
            if (!(((a.getY() + a.getHeight()) < (b.getY())) || (a.getY() > (b.y + b.getHeight())) || ((a.getX() + a.getWidth()) < b.getX()) || (a.getX() > (b.getX() + b.getWidth())))) {
                console.log("Detection: " + a.id() + " hit " + b.id())
            };
        }
    }
}