如何知道Javascript中碰撞发生在哪一方?

时间:2015-12-04 01:41:04

标签: javascript box collider

我正在编写一个练习脚本,其中我为一堆盒子设置动画并检测碰撞,然后相应地移动它们。问题是,我发现了碰撞,但是如何检查碰撞发生在哪一侧,这样我就可以顺利地移动它们了。

这是我写的方法。有更好的方法吗?

this.ballCollide = function(){
for(var i = 0; i < ball.length; i++){
  for(var j = i+1 ; j < ball.length; j++){
    if( ((ballX[i] + 50) >= ballX[j]) && (ballX[i] <= (ballX[j] + 50)) && ((ballY[i] + 50) >= ballY[j]) && (ballY[i] <= (ballY[j] + 50))){
       movePosX[i] = -movePosX[i];
       movePosY[i] = -movePosY[i];
       movePosX[j] = -movePosX[j];
       movePosY[j] = -movePosY[j];
    }
  }
}

}

1 个答案:

答案 0 :(得分:0)

我认为有点重构是有道理的。以下内容可能有助于您找到正确的方向:

注意:我没有验证代码,因此请阅读每个字符。另外,我认为左右都是设置的,但是没有通过顶部/底部或最终的移动逻辑工作,因为我不认为我理解原始逻辑(或者至少它开始没有对我有意义 - 似乎你在某处错过了一个||。

this.ballCollide = function() {

    for (var i = 0; i < ball.length; i++) {

        var ax = ballX[i];
        var ay = ballY[i];

        for (var j = i + 1; j < ball.length; j++) {

            var bx = ballX[j];
            var by = ballY[j];

            var left    = ( ax <= bx + 50 );
            var right   = ( ax + 50 >= bx );
            var top     = ( ay + 50 >= by );
            var bottom  = ( ay <= by + 50 );

            if( (left && right) && (top && bottom) ){

                movePosX[i] = -movePosX[i];
                movePosY[i] = -movePosY[i];
                movePosX[j] = -movePosX[j];
                movePosY[j] = -movePosY[j];

            }

        }
    }
}

这里&#34;包含&#34;可能有用的功能:

function contains (big, small){

    if( ! big || ! small ){
        return false;
    }

    var Oresult = {};

    var Obig    = {x:big.x,     y:big.y,    w:big.width,    h:big.height};
    var Osmall  = {x:small.x,   y:small.y,  w:small.width,  h:small.height};

    Obig.xMax   = Obig.x    + Obig.w;
    Obig.yMax   = Obig.y    + Obig.h;

    Osmall.xMax = Osmall.x  + Osmall.w;
    Osmall.yMax = Osmall.y  + Osmall.h;

    for (var p in Obig) {

        Oresult[p] = ( Obig[p] >= Osmall[p] ) ? true : false;

    }

    var retval = (!Oresult.x && !Oresult.y && Oresult.xMax && Oresult.yMax) ? true : false;

    return retval;
}
相关问题