关于javascript中碰撞检测的demo案例

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

两个矩形块的碰撞：

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

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

if( domA.left > domB.right  || domA.top > domB.bottom || domA.right < domB.left || domA.bottom < domB.top  )
   {
       return false // 未碰撞
   } else {
       return true // 碰撞
   }
     

圆形与圆形的碰撞：

判断任意两个圆形碰撞比较简单，只需要判断两个圆的圆心距离是否小于两圆半径之和，如果小于半径和，就可以判定两个圆发生碰撞。

图形示例：

简单算法实现

    var distance = Math.sqrt(Math.pow(x1 - x2) + Math.pow(y1 - y2) )
    if (distance < r1 + r2) { // r1、r2 分别为两圆的半径
        return true // 发生碰撞
    } else {
        return false //未发生碰撞
    }