2D碰撞算法初解

背景

判断，bird与pencil的碰撞，单个遍历判断

表现，与视觉所见保持一致

概念，这更像一个“内含”比较，即毕竟有无交集

函数

static isStrike(birdBorder, pencilBorder) {
        let result = false;
        if(birdBorder.top < pencilBorder.bottom &&
            birdBorder.bottom > pencilBorder.top &&
            birdBorder.right > pencilBorder.left &&
            birdBorder.left < pencilBorder.right
        ){
            result = true;
        }
        return result;
}

当所有条件为true的时候，返回true，碰撞。

当有任意条件为false的时候，返回false，没有碰撞。

这里函数可以简化，看大家喜好。

解析

涵盖了上下左右四个方向的判断，以上部为例：

1.上部未接触

 

如果bird在pencil上面，birdBorder.bottom > pencilBorder.top 始终为false

这里比较的是数值，bird在上面，birdBorder.bottom就是小的那个

总的来说，二者没有接触。

if(birdBorder.top < pencilBorder.bottom && // true
   birdBorder.bottom > pencilBorder.top && // false
   birdBorder.right > pencilBorder.left && // true
   birdBorder.left < pencilBorder.right // true
)

2.上部接触

 

如果bird与pencil上部接触，birdBorder.bottom > pencilBorder.top 为true，其他比较也皆为true

这里比的是数值，bird底部在pencil顶部的下面，birdBorder.bottom就是大的那个，碰撞

if(birdBorder.top < pencilBorder.bottom && // true
   birdBorder.bottom > pencilBorder.top && // true
   birdBorder.right > pencilBorder.left && // true
   birdBorder.left < pencilBorder.right // true
)

3.其他

其他情况也与上部的情况相差不多，其中还包含多种情况并行，大家可以摆摆纸张试试。

没有理解也不要着急，欢迎在下方留言讨论