在KineticJS中检测动画形状之间的碰撞时遇到很多麻烦

时间:2014-02-12 18:37:35

标签: html5 kineticjs

我有一个固定在x轴上的矩形(矩形),但在点击时向上移动y轴,在释放时向下移动y轴。

我有一个setInterval函数,可以创建固定在y轴上的矩形(名称)实例,并设置为在舞台上从右向左移动的动画。 y值是在setInterval函数中随机生成的。

我尝试过以下功能:

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)

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)

这些都没有奏效。我不知道是不是因为矩形的实例是在setInterval函数中创建的,这使得它成为某种范围问题,或者是因为x / y值不断变化,但是碰撞和动画是相辅相成的,所以我不明白为什么那会是一个问题。

任何朝着正确方向的帮助都将受到极大的赞赏。

1 个答案:

答案 0 :(得分:0)

尝试这种稍微更高效的重构:

演示: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)
        )
    );
}