如何知道Javascript的碰撞发生在哪一边？

Question

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

这就是我的方法wrote.Is还有更好的方法吗？

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];
    }
  }
}

}

Answer 1

我认为需要进行一些重构。以下内容可能会帮助您指明正确的方向：

注意：我没有验证代码，所以请阅读每个字符。另外，我认为左和右已经设置好，但没有通过顶部/底部或最终的移动逻辑工作，因为我认为我不理解原始逻辑（或者至少它开始对我没有意义-- 好像你在某处遗漏了一个 ||。

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];

            }

        }
    }
}

这是一个可能有用的 "contains" 函数：

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;
}

如何知道Javascript的碰撞发生在哪一边？

How to know in which side the collision has occured in Javascript?

javascript

box

collider