JavaScript 无法检测两个 Div 之间的碰撞轴

Question

正在检测 2 个 div 是否重叠，如果重叠，我将检查矩形 1 的右侧和矩形 2 的左侧、矩形 1 的顶部和矩形 2 的底部等之间的距离。

    if (rect1.right > rect2.left &&
        rect1.left < rect2.right &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top) {

        //collision detected.

        var dtop = Math.abs(rect1.top - rect2.bottom);
        var dbot = Math.abs(rect1.bottom - rect2.top);
        var dright =Math.abs(rect1.right - rect2.left);
        var dleft = Math.abs(rect1.left - rect2.right);
        var closestSide = Math.min(dtop,dbot,dright,dleft);

        if (closestSide == dleft || dright) {
            collisionAxis = "x";
        } 

        if (closestSide == dtop || dbot) {
            collisionAxis = "y";
        } 

        alert("collisionAxis: " + collisionAxis);

        return collisionAxis;

    }

出于某种原因，collisionAxis 始终被设置为“y”，即使当closestSide == dleft || 时也是如此。 dright，应将碰撞轴设置为“x”...

这是一个 JSFiddle 示例。当白色矩形与黑色矩形碰撞时，我的 DetectCollision 函数中的变量 collisionAxis 应设置为“x”，因为 closestSide = dright，但不知何故它被设置为“y”。

谁能告诉我为什么？

Answer 1

应该是

    if (closestSide == dleft || closestSide == dright) {
        collisionAxis = "x";
    } 

    if (closestSide == dtop || closestSide == dtopdbot) {
        collisionAxis = "y";
    }