資訊專欄INFORMATION COLUMN
摘要：碰撞檢測，故名思議，兩個元素在運動的過程中是否有接觸。接下來，我們從簡單到復(fù)雜的碰撞一一解析其中的算法。假設(shè)求出碰撞無碰撞下篇繼續(xù)講解當圓與矩形碰撞，等更復(fù)雜的碰撞檢測
碰撞檢測，故名思議，兩個元素在運動的過程中是否有接觸。
接下來，我們從簡單到復(fù)雜的碰撞一一解析其中的算法。編碼使用JavaScript。
ps:下列圖形均指實心圖形
這個太簡單了，不多說，就是當坐標一致的時候就是碰撞.
//A（x1,y1）B(x2,y2)
if(x1===x2 && y1===y2){
//碰撞
}else{
//無碰撞
}
點與圓的碰撞
點A(x1,y1) 圓心(x2,y2) 半徑 r
我們可以看出紅色的點與圓心的距離若小于半徑，那么點與圓便發(fā)生碰撞。
根據(jù)勾股定理可以得出距離 d = √((x1-x2)^2 + (y1-y2)^2)
//點A(x1,y1) 圓心(x2,y2) 半徑 r
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= r){
//碰撞
}else{
//無碰撞
}
圓與圓的碰撞
圓A(x1,y1) 半徑r1 ; 圓B(x2,y2) 半徑 r2
同樣根據(jù)勾股定理可以得出距離 d = √((x1-x2)^2 + (y1-y2)^2)
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= (r1 + r2)){
//碰撞
}else{
//無碰撞
}
點與矩形的碰撞
首先矩形的表達方式有：
已知四個角的一個頂點(x2,y2)與寬w高h
已知幾何中心點(x2,y2)與寬w高h
左上角與右下角兩個頂點(x2,y2)、(x3,y3)
//1. 已知四個角的一個頂點(x2,y2)與寬w高h，以左上角為例
if(x1>=x2 && x1<=(x2+w) || (y1>=y2 && y1<=(y2+h))){
//碰撞
}else{
//無碰撞
}
//2. 已知幾何中心點(x2,y2)與寬w高h
if(x1 >= (x2-w/2) && x1 <= (x2+w/2) || (y1 >= (y2-h/2) && y1 <= (y2 + h/2))){
//碰撞
}else{
//無碰撞
}
//3. 左上角與右下角兩個頂點(x2,y2)、(x3,y3)
if(x1 >= x2 && x1 <= x3 || (y1 >= y2 && y1 <= y3)){
//碰撞
}else{
//無碰撞
}
矩形與矩形的碰撞
無論矩形是由什么數(shù)據(jù)表示。我們都可以求出幾何中心A點與B點的坐標,與矩形寬w1 w2;高h1 h2。
假設(shè)求出A(x1,y1) B(x2,y2)
if(Math.abs(x2-x1) <= (w1+w2)/2 && Math.abs(y2-y1) <= (h1+h2)){
//碰撞
}else{
//無碰撞
}
下篇繼續(xù)講解當圓與矩形碰撞，等更復(fù)雜的碰撞檢測
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81735.html
摘要：這篇我們將講解圓與矩形的碰撞圓與矩形的碰撞檢測通常在或者中我們會這樣表示一個圓圓心，半徑表示矩形中心點坐標平移并以幾何中心旋轉(zhuǎn)任意角度展示的矩形即幾何中心點你可能會問，如果矩形被旋轉(zhuǎn)了怎么辦我們可以在矩形的中心點建立一個新的坐標系統(tǒng)。 這篇我們將講解圓與矩形的碰撞； 圓與矩形的碰撞檢測 通常在svg或者canvas中我們會這樣表示一個圓: 圓心(cx,cy)，半徑r; 表示矩形：中心...
摘要：來源編程精解中文第三版翻譯項目原文譯者飛龍協(xié)議自豪地采用谷歌翻譯部分參考了編程精解第版所有現(xiàn)實都是游戲。黑色的方塊表示玩家，玩家任務(wù)是收集黃色的方塊硬幣，同時避免碰到紅色素材巖漿。網(wǎng)格中的元素可能是空氣固體或巖漿。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Project: A Platform Game 譯者：飛龍 協(xié)議：CC BY-NC-SA...
閱讀 1270·2019-08-30 15:55
閱讀 1011·2019-08-30 15:55
閱讀 2221·2019-08-30 15:44
閱讀 2993·2019-08-29 14:17
閱讀 1197·2019-08-29 12:45
閱讀 3375·2019-08-26 10:48
閱讀 3190·2019-08-23 18:18
閱讀 2673·2019-08-23 16:47
