摘要:碰撞檢測剛才回答了一個游戲的問答。心血來潮,就想寫寫碰撞檢測,廢話不多說,直接懟。矩形和矩形的碰撞檢測現(xiàn)有。資料圓形與矩形碰撞檢測圓形與旋轉(zhuǎn)矩形碰撞檢測屬性橢圓碰撞檢測
碰撞檢測
剛才回答了一個H5游戲的問答。心血來潮,就想寫寫碰撞檢測,廢話不多說,直接懟。
矩形和矩形的碰撞檢測現(xiàn)有rect1 = {x:0,y:0,w:5,h:5};rect2 = {x:10,y:10,w:5,h:5};。
矩形我們一般擁有的都是左上角點的XY以及他的寬高WH。碰撞當(dāng)然就是我中有你,你中有我咯,那么就是判斷四條邊,在我左邊的右邊,右邊的左邊,上邊的下邊,下邊的上邊。說起來有點繞口,那就直接上代碼吧,下面四個條件如果都成立那么就是有交集,他們碰撞了。
rect1.x < rect2.x + rect2.w // rect1.x 代表左邊界 rect1.x + rect1.w > rect2.x // rect1.x + rect1.w 代表右邊界 rect1.y < rect2.y + rect2.h // rect1.y 代表上邊界 rect1.y + rect1.h > rect2.y // rect1.y + rect1.h 代表下邊界 //x和y可以看做起始點,x+w和y+h可以看做終止點。圓形和圓形的碰撞檢測
現(xiàn)有circle1={x:5,y:5,r:1};circle2={x:8,y:8,r:1}。
圓形我們一般擁有的是圓心點的XY以及他的半徑r。圓的碰撞怎么判斷呢?計算兩個圓心點的距離,如果距離大于他們的半徑相加就可以了。那好,我們懟代碼了。坐標(biāo)相減算出來的是坐標(biāo)點之間的距離,這樣我們是不是一個直角三角形?勾股定理可以求出第三條邊,這樣我們就可以比較了
Math.sqrt((circle2.x - circle1.x)**2+(circle2.y - circle1.y)**2)>circle2.r + circle1.r圓形和矩形的碰撞檢測
現(xiàn)有circle={x:5,y:5,r:1};rect={x:10,y:10,w:5,h:5};。
這個就有點難度了不是想象中的那么簡單,要檢查圓形和矩形碰撞,矩形上找到離圓心最近的點,比較兩點距離對于半徑。
//我們先找x軸,比較圓心點和矩形左邊界,如果不是比對右邊界。如果不存在左右就是存在中間唄。 if(circle.x圓形與旋轉(zhuǎn)矩形碰撞檢測rect.x+rect.w){return rect.x+rect.w} else{return circle.x} //我們再去找y軸,同樣的道理. if(circle.y rect.y+rect.h){return rect.y+rect.h} else{return circle.y} //有上面我們獲得到的量,去計算就可以了,這就很簡單了。
可以看我下面的那個鏈接,我在這里先大體說一下原理,旋轉(zhuǎn)部分是把矩形復(fù)原,把圓形通過矩形的中心點旋轉(zhuǎn),也可以理解為旋轉(zhuǎn)畫布,然后找圓形中心點,之后基本原理同上。
不管什么東西,老夫就是正面剛
1.canvas的context.globalCompositeOperation="source-in";
destination-in 在源圖像中顯示目標(biāo)圖像。只有源圖像之內(nèi)的目標(biāo)圖像部分會被顯示,源圖像是透明的。
source-in 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像之內(nèi)的源圖像部分會顯示,目標(biāo)圖像是透明的。
圓形與矩形碰撞檢測
圓形與旋轉(zhuǎn)矩形碰撞檢測
HTML canvas globalCompositeOperation 屬性
橢圓碰撞檢測
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/107600.html
摘要:說明碰撞檢測,用來檢查兩個精靈是否接觸。如果沒有碰撞到返回值就是。示例發(fā)生碰撞時的回調(diào)函數(shù)如果發(fā)生碰撞,顯示哪邊的邊界發(fā)生碰撞邊界左側(cè)發(fā)生碰撞邊界右側(cè)發(fā)生碰撞邊界 說明 碰撞檢測,用來檢查兩個精靈是否接觸。 Pixi 沒有內(nèi)置的碰撞檢測系統(tǒng), 所以這里我們使用一個名為 Bump 的庫,Bump 是一個易于使用的2D碰撞方法的輕量級庫,可與 Pixi 渲染引擎一起使用。它提供了制作大多數(shù)...
摘要:文章首發(fā)于我的博客前言上一篇文章小恐龍游戲源碼探究八奔跑的小恐龍實現(xiàn)了小恐龍的繪制以及鍵盤對小恐龍的控制,這一篇文章中將實現(xiàn)游戲的碰撞檢測。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍》實現(xiàn)了小恐龍的繪制以及鍵盤對小恐龍的控制,這一篇文章中將實現(xiàn)游戲的碰撞檢測。 碰撞檢測原理 這個游戲采用的檢測方法是盒子碰撞,這種檢...
摘要:碰撞檢測邊界檢測在前端游戲,以及涉及拖拽交互的場景應(yīng)用十分廣泛。這就涉及到碰撞檢測或者叫邊界檢測的問題了。若四邊均未發(fā)生重合,則未發(fā)生碰撞,反之則發(fā)生碰撞。目前業(yè)務(wù)有遇到碰撞需求,所以抽時間整理了下。 碰撞檢測(邊界檢測)在前端游戲,以及涉及拖拽交互的場景應(yīng)用十分廣泛。 那么啥叫碰撞?JavaScript 又是如何檢測 DOM 發(fā)生碰撞的呢? 碰撞,顧名思義,就是兩個物體碰撞在了一起,...
摘要:碰撞檢測邊界檢測在前端游戲,以及涉及拖拽交互的場景應(yīng)用十分廣泛。這就涉及到碰撞檢測或者叫邊界檢測的問題了。若四邊均未發(fā)生重合,則未發(fā)生碰撞,反之則發(fā)生碰撞。目前業(yè)務(wù)有遇到碰撞需求,所以抽時間整理了下。 碰撞檢測(邊界檢測)在前端游戲,以及涉及拖拽交互的場景應(yīng)用十分廣泛。 那么啥叫碰撞?JavaScript 又是如何檢測 DOM 發(fā)生碰撞的呢? 碰撞,顧名思義,就是兩個物體碰撞在了一起,...
閱讀 1899·2023-04-26 01:58
閱讀 2019·2019-08-30 11:26
閱讀 2761·2019-08-29 12:51
閱讀 3522·2019-08-29 11:11
閱讀 1208·2019-08-26 11:54
閱讀 2123·2019-08-26 11:48
閱讀 3510·2019-08-26 10:23
閱讀 2411·2019-08-23 18:30