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