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

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

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

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

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

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

概念模型

3.圓形與矩形之間的碰撞
核心理念
通過(guò)找出矩形上離圓心最近的點(diǎn)，然后通過(guò)判斷該點(diǎn)與圓心的距離是否小于圓的半徑，若小于則為碰撞。改點(diǎn)的位置可以通過(guò)獲取矩形左上角的坐標(biāo)位置和元素的寬高來(lái)進(jìn)行數(shù)據(jù)計(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ì)還是找出矩形上離圓心的最近點(diǎn)。但是矩形的邊緣坐標(biāo)需要進(jìn)行一個(gè)數(shù)據(jù)轉(zhuǎn)換，通過(guò)這個(gè)旋轉(zhuǎn)的角度值計(jì)算轉(zhuǎn)換后的位置
通用算法（同上）
var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance
概念模型 

5.矩形與障礙物之間的碰撞（地圖碰撞算法）
核心理念
將整個(gè)地圖進(jìn)行數(shù)據(jù)化，劃分為一個(gè)矩形的地圖，地圖的每個(gè)基本單位是一個(gè)矩形區(qū)域。地圖中所有可能參與碰撞的物體都要是基本單位大小的整數(shù)倍，地圖中參與檢測(cè)的對(duì)象都存儲(chǔ)著自身所在格子的坐標(biāo)，兩個(gè)物體在同一格才為碰撞。
通用算法
//標(biāo)記為0的可以通過(guò)，1的不可以通過(guò)既是障礙物
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)行判斷檢測(cè)碰撞了
......
概念模型