简析 js 碰撞检测原理与算法实现

碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。

那么啥叫碰撞？JavaScript 又是如何检测 DOM 发生碰撞的呢？

碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者叫边界检测）的问题了。

碰撞检测的常见需求场景：

前端常见的的碰撞，我们可以粗略的分为几下几类：

两个矩形块的碰撞：

判断任意两个（水平）矩形的任意一边是否有间距，从而得之两个矩形块有没有发生碰撞。具体实现方式，可以选定一个矩形为参照物，计算另一矩形的与自己相近的边是否发生重合现象。若四边均未发生重合，则未发生碰撞，反之则发生碰撞。

图形示例：

简单算法实现(非碰撞情况，else 分支就是碰撞情况)：

    if( domA.left > domB.right 
        || domA.top > domB.bottom
        || domA.right < domB.left
        || domA.bottom < domB.top )
    {
        re