3.碰撞检测的封装函数

function bump(el,el2) {
    let elRect = el.getBoundingClientRect();
    let el2Rect = el.getBoundingClientRect();
    if(elRect.left > el2Rect.right
    ||el2Rect.left > el2Rect.right
    ||elRect.top > el2Rect.bottom
    ||el2Rect.top > elRect.bottom){
        return false;
    }else{
        return true;
    }
}

如上所示，代码粘走就可以用了

if（bump（el,el2））{

这里放碰撞了需要执行的内容

}else{

这里是没碰撞的内容

}

解读一下：

我封装了一个叫做bump（碰撞）的函数，接受两个参数el,el2；

1.调用getBoundingRect()方法分别获取两个元素在可视区的相对位置；

2.判断两个元素四个边的位置，当元素一的左边坐标大于元素二的右边的坐标

或者 元素二的左边坐标大于元素一的右边的坐标

或者 元素一的上边框距离可视区顶部的距离 大于元素二的底部距离可视区顶部的距离

或者 元素二距离顶部的距离大于元素一的底部距离顶部的距离

(这里有点绕，自己悟一下)

以上四种情况是绝对不会碰撞的，就返回false.

3.其余情况是两个元素会碰撞，就返回true.