Having a lot of trouble detecting collisions between animated shapes in KineticJS

Question

I have one rectangle (rectangle) that is fixed on its x-axis but moves up its y-axis when clicked and moves down its y-axis when released.

I have a setInterval function that creates instances of rectangles (name) that are fixed on their y-axis and are animated to move from right to left across the stage. The y-values are randomly generated in the setInterval function.

I've tried the following functions:

var collisionDetection = function(a,b){
    var status = false;

    var boardX = 350;
    var boardY = a.y();

    var attackX = b.x();
    var attackY = b.y();

    if(boardX == attackX){
        console.log('true');
    }

}

collisionDetection(rectangle,name)

And:

function doObjectsCollide(a, b) {
    if( !(
        ((a.y() + a.getHeight()) < (b.y())) ||
        (a.y() > (b.y + b.getHeight())) ||
        ((a.x() + a.getWidth()) < b.x()) ||
        (a.x() > (b.x() + b.getWidth()))
    ));

    console.log('true');
};

doObjectsCollide(rectangle,name)

Neither of these have worked. I can't tell if it's because instances of the rectangle are created in a setInterval function which makes it some kind of scoping issue, or it's because the x/y values are constantly changing, but collision and animation go hand-in-hand so I don't understand why that would be a problem.

Any help in the right direction would be hugely appreciated.

Answer 1

Try this slightly more efficient refactoring:

Demo: http://jsfiddle.net/m1erickson/hS9P4/

function doRectsCollide(a,b){
    var ax=a.x();
    var ay=a.y();
    var bx=b.x();
    var by=b.y();
    return(
        !(
            (bx>ax+a.width()) || 
            (bx+b.width()<ax) || 
            (by>ay+a.height()) ||
            (by+b.height()<ay)
        )
    );
}