js隨手筆記-------理解JavaScript碰撞檢測算法核心簡單實現原理

碰撞檢測在前端遊戲，設計拖拽的實用業務等領域的應用場景很是普遍，今天咱們就在這裏對於前端JavaScript如何實現碰撞檢測算法進行一個原理上的探討，讓你們可以明白如何實現碰撞以及碰撞的理念是什麼：
1.矩形與矩形間的碰撞
核心理念
判斷任意兩個（無旋轉）矩形的任意一邊是否無間距，從而判斷是否碰撞。大致實現方式就是以一個矩形的某個定點做爲運動物，計算本身的坐上頂點與另外一元素的左上定點的位置和寬高數據進行判斷檢測
通用算法判斷

if(react1.offsetLeft<react2.offsetLeft+react2.offsetWidth&&
   react1.offsetLeft+react1.offsetWidth>react2.offsetLeft&&
   react1.offsetTop<react2.offsetTop+react2.offsetHeight&&
   react1.offsetHeight+react1.offsetTop>react2.offsetTop
){
 console.log('碰撞成功')
}

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

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

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

概念模型

3.圓形與矩形之間的碰撞
核心理念
經過找出矩形上離圓心最近的點，而後經過判斷該點與圓心的距離是否小於圓的半徑，若小於則爲碰撞。改點的位置能夠經過獲取矩形左上角的座標位置和元素的寬高來進行數據計算。
通用算法

var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance<r1){
  console.log('碰撞成功')
}else{
 console.log('沒碰到')
}

概念模型

4.圓形與旋轉矩形之間的碰撞
核心理念
即便矩形以其中心爲旋轉軸進行了旋轉，可是判斷它與圓形是否發生碰撞的本質仍是找出矩形上離圓心的最近點。可是矩形的邊緣座標須要進行一個數據轉換，經過這個旋轉的角度值計算轉換後的位置
通用算法（同上）

var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance<r1){
  console.log('碰撞成功')
}else{
 console.log('沒碰到')
}

概念模型

5.矩形與障礙物之間的碰撞（地圖碰撞算法）
核心理念
將整個地圖進行數據化，劃分爲一個矩形的地圖，地圖的每一個基本單位是一個矩形區域。地圖中全部可能參與碰撞的物體都要是基本單位大小的整數倍，地圖中參與檢測的對象都存儲着自身所在格子的座標，兩個物體在同一格才爲碰撞。
通用算法

//標記爲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],
]
//設置角色的初始位置
player={left:2,top:2}
//下面就要用到A*尋路算法進行判斷檢測碰撞了
......

概念模型