摘要：通用算法概念模型圓形與矩形之間的碰撞核心理念通過找出矩形上離圓心最近的點，然后通過判斷該點與圓心的距離是否小于圓的半徑，若小于則為碰撞。

碰撞檢測在前端游戲，設(shè)計拖拽的實用業(yè)務(wù)等領(lǐng)域的應(yīng)用場景非常廣泛，今天我們就在這里對于前端JavaScript如何實現(xiàn)碰撞檢測算法進(jìn)行一個原理上的探討，讓大家能夠明白如何實現(xiàn)碰撞以及碰撞的理念是什么：
1.矩形與矩形間的碰撞
核心理念
判斷任意兩個（無旋轉(zhuǎn)）矩形的任意一邊是否無間距，從而判斷是否碰撞。大體實現(xiàn)方式就是以一個矩形的某個定點作為運動物，計算自己的坐上頂點與另一元素的左上定點的位置和寬高數(shù)據(jù)進(jìn)行判斷檢測
通用算法判斷

if(react1.offsetLeftreact2.offsetLeft&&
   react1.offsetTopreact2.offsetTop
){
 console.log("碰撞成功")
}

如下：圖中的 x 既是 offsetLeft , y 既是 offsetTop；矩形的寬和高既是 offsetWidth 、offsetHeight

2.圓形與圓形的碰撞
核心理念
通過判斷任意兩個圓形的圓心距離是否小于兩圓半徑之和，若小于則為碰撞。
通用算法

|AB|=Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))

概念模型

3.圓形與矩形之間的碰撞
核心理念
通過找出矩形上離圓心最近的點，然后通過判斷該點與圓心的距離是否小于圓的半徑，若小于則為碰撞。改點的位置可以通過獲取矩形左上角的坐標(biāo)位置和元素的寬高來進(jìn)行數(shù)據(jù)計算。
通用算法

var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance
概念模型 

4.圓形與旋轉(zhuǎn)矩形之間的碰撞
核心理念
即使矩形以其中心為旋轉(zhuǎn)軸進(jìn)行了旋轉(zhuǎn)，但是判斷它與圓形是否發(fā)生碰撞的本質(zhì)還是找出矩形上離圓心的最近點。但是矩形的邊緣坐標(biāo)需要進(jìn)行一個數(shù)據(jù)轉(zhuǎn)換，通過這個旋轉(zhuǎn)的角度值計算轉(zhuǎn)換后的位置
通用算法（同上）
var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance
概念模型 

5.矩形與障礙物之間的碰撞（地圖碰撞算法）
核心理念
將整個地圖進(jìn)行數(shù)據(jù)化，劃分為一個矩形的地圖，地圖的每個基本單位是一個矩形區(qū)域。地圖中所有可能參與碰撞的物體都要是基本單位大小的整數(shù)倍，地圖中參與檢測的對象都存儲著自身所在格子的坐標(biāo)，兩個物體在同一格才為碰撞。
通用算法
//標(biāo)記為0的可以通過，1的不可以通過既是障礙物
var map=[
    [1,1,1,1,1,1,1,1,0],
    [1,0,1,0,1,0,0,0,1],
    [1,0,0,0,1,0,1,1,0],
    [1,1,0,0,0,0,0,1,0],
    [1,1,1,1,1,1,1,1,1],
]
//設(shè)置角色的初始位置
player={left:2,top:2}
//下面就要用到A*尋路算法進(jìn)行判斷檢測碰撞了
......
概念模型