背景
判断,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.其他
其他情况也与上部的情况相差不多,其中还包含多种情况并行,大家可以摆摆纸张试试。
没有理解也不要着急,欢迎在下方留言讨论