摘要：通用算法概念模型圓形與矩形之間的碰撞核心理念通過找出矩形上離圓心最近的點，然后通過判斷該點與圓心的距離是否小于圓的半徑，若小于則為碰撞。
碰撞檢測在前端游戲，設計拖拽的實用業務等領域的應用場景非常廣泛，今天我們就在這里對于前端JavaScript如何實現碰撞檢測算法進行一個原理上的探討，讓大家能夠明白如何實現碰撞以及碰撞的理念是什么：
1.矩形與矩形間的碰撞
核心理念
判斷任意兩個（無旋轉）矩形的任意一邊是否無間距，從而判斷是否碰撞。大體實現方式就是以一個矩形的某個定點作為運動物，計算自己的坐上頂點與另一元素的左上定點的位置和寬高數據進行判斷檢測
通用算法判斷
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.圓形與矩形之間的碰撞
核心理念
通過找出矩形上離圓心最近的點，然后通過判斷該點與圓心的距離是否小于圓的半徑，若小于則為碰撞。改點的位置可以通過獲取矩形左上角的坐標位置和元素的寬高來進行數據計算。
通用算法
var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance
概念模型
4.圓形與旋轉矩形之間的碰撞
核心理念
即使矩形以其中心為旋轉軸進行了旋轉，但是判斷它與圓形是否發生碰撞的本質還是找出矩形上離圓心的最近點。但是矩形的邊緣坐標需要進行一個數據轉換，通過這個旋轉的角度值計算轉換后的位置
通用算法（同上）
var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance
概念模型
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*尋路算法進行判斷檢測碰撞了
......
概念模型
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96355.html
