亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

碰撞檢測(cè)

Dogee / 2165人閱讀

摘要:碰撞檢測(cè)剛才回答了一個(gè)游戲的問(wèn)答。心血來(lái)潮,就想寫(xiě)寫(xiě)碰撞檢測(cè),廢話不多說(shuō),直接懟。矩形和矩形的碰撞檢測(cè)現(xiàn)有。資料圓形與矩形碰撞檢測(cè)圓形與旋轉(zhuǎn)矩形碰撞檢測(cè)屬性橢圓碰撞檢測(cè)

碰撞檢測(cè)

剛才回答了一個(gè)H5游戲的問(wèn)答。心血來(lái)潮,就想寫(xiě)寫(xiě)碰撞檢測(cè),廢話不多說(shuō),直接懟。

矩形和矩形的碰撞檢測(cè)

現(xiàn)有rect1 = {x:0,y:0,w:5,h:5};rect2 = {x:10,y:10,w:5,h:5};。
矩形我們一般擁有的都是左上角點(diǎn)的XY以及他的寬高WH。碰撞當(dāng)然就是我中有你,你中有我咯,那么就是判斷四條邊,在我左邊的右邊,右邊的左邊,上邊的下邊,下邊的上邊。說(shuō)起來(lái)有點(diǎn)繞口,那就直接上代碼吧,下面四個(gè)條件如果都成立那么就是有交集,他們碰撞了。

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可以看做起始點(diǎn),x+w和y+h可以看做終止點(diǎn)。

圓形和圓形的碰撞檢測(cè)

現(xiàn)有circle1={x:5,y:5,r:1};circle2={x:8,y:8,r:1}。
圓形我們一般擁有的是圓心點(diǎn)的XY以及他的半徑r。圓的碰撞怎么判斷呢?計(jì)算兩個(gè)圓心點(diǎn)的距離,如果距離大于他們的半徑相加就可以了。那好,我們懟代碼了。坐標(biāo)相減算出來(lái)的是坐標(biāo)點(diǎn)之間的距離,這樣我們是不是一個(gè)直角三角形?勾股定理可以求出第三條邊,這樣我們就可以比較了

Math.sqrt((circle2.x - circle1.x)**2+(circle2.y - circle1.y)**2)>circle2.r + circle1.r

圓形和矩形的碰撞檢測(cè)

現(xiàn)有circle={x:5,y:5,r:1};rect={x:10,y:10,w:5,h:5};。
這個(gè)就有點(diǎn)難度了不是想象中的那么簡(jiǎn)單,要檢查圓形和矩形碰撞,矩形上找到離圓心最近的點(diǎn),比較兩點(diǎn)距離對(duì)于半徑。

//我們先找x軸,比較圓心點(diǎn)和矩形左邊界,如果不是比對(duì)右邊界。如果不存在左右就是存在中間唄。
if(circle.xrect.x+rect.w){return rect.x+rect.w}
else{return circle.x}
//我們?cè)偃フ襶軸,同樣的道理.
if(circle.yrect.y+rect.h){return rect.y+rect.h}
else{return circle.y}
//有上面我們獲得到的量,去計(jì)算就可以了,這就很簡(jiǎn)單了。

圓形與旋轉(zhuǎn)矩形碰撞檢測(cè)

可以看我下面的那個(gè)鏈接,我在這里先大體說(shuō)一下原理,旋轉(zhuǎn)部分是把矩形復(fù)原,把圓形通過(guò)矩形的中心點(diǎn)旋轉(zhuǎn),也可以理解為旋轉(zhuǎn)畫(huà)布,然后找圓形中心點(diǎn),之后基本原理同上。

橢圓與橢圓碰撞檢測(cè) 其他的檢測(cè)手段

不管什么東西,老夫就是正面剛
1.canvascontext.globalCompositeOperation="source-in";
destination-in 在源圖像中顯示目標(biāo)圖像。只有源圖像之內(nèi)的目標(biāo)圖像部分會(huì)被顯示,源圖像是透明的。
source-in 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像之內(nèi)的源圖像部分會(huì)顯示,目標(biāo)圖像是透明的。

資料

圓形與矩形碰撞檢測(cè)

圓形與旋轉(zhuǎn)矩形碰撞檢測(cè)

HTML canvas globalCompositeOperation 屬性

橢圓碰撞檢測(cè)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/107600.html

相關(guān)文章

  • 學(xué)習(xí) PixiJS — 碰撞檢測(cè)

    摘要:說(shuō)明碰撞檢測(cè),用來(lái)檢查兩個(gè)精靈是否接觸。如果沒(méi)有碰撞到返回值就是。示例發(fā)生碰撞時(shí)的回調(diào)函數(shù)如果發(fā)生碰撞,顯示哪邊的邊界發(fā)生碰撞邊界左側(cè)發(fā)生碰撞邊界右側(cè)發(fā)生碰撞邊界 說(shuō)明 碰撞檢測(cè),用來(lái)檢查兩個(gè)精靈是否接觸。 Pixi 沒(méi)有內(nèi)置的碰撞檢測(cè)系統(tǒng), 所以這里我們使用一個(gè)名為 Bump 的庫(kù),Bump 是一個(gè)易于使用的2D碰撞方法的輕量級(jí)庫(kù),可與 Pixi 渲染引擎一起使用。它提供了制作大多數(shù)...

    ybak 評(píng)論0 收藏0
  • Chrome 小恐龍游戲源碼探究九 -- 游戲碰撞檢測(cè)

    摘要:文章首發(fā)于我的博客前言上一篇文章小恐龍游戲源碼探究八奔跑的小恐龍實(shí)現(xiàn)了小恐龍的繪制以及鍵盤(pán)對(duì)小恐龍的控制,這一篇文章中將實(shí)現(xiàn)游戲的碰撞檢測(cè)。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍》實(shí)現(xiàn)了小恐龍的繪制以及鍵盤(pán)對(duì)小恐龍的控制,這一篇文章中將實(shí)現(xiàn)游戲的碰撞檢測(cè)。 碰撞檢測(cè)原理 這個(gè)游戲采用的檢測(cè)方法是盒子碰撞,這種檢...

    cpupro 評(píng)論0 收藏0
  • 簡(jiǎn)析 js 碰撞檢測(cè)原理與算法實(shí)現(xiàn)

    摘要:碰撞檢測(cè)邊界檢測(cè)在前端游戲,以及涉及拖拽交互的場(chǎng)景應(yīng)用十分廣泛。這就涉及到碰撞檢測(cè)或者叫邊界檢測(cè)的問(wèn)題了。若四邊均未發(fā)生重合,則未發(fā)生碰撞,反之則發(fā)生碰撞。目前業(yè)務(wù)有遇到碰撞需求,所以抽時(shí)間整理了下。 碰撞檢測(cè)(邊界檢測(cè))在前端游戲,以及涉及拖拽交互的場(chǎng)景應(yīng)用十分廣泛。 那么啥叫碰撞?JavaScript 又是如何檢測(cè) DOM 發(fā)生碰撞的呢? 碰撞,顧名思義,就是兩個(gè)物體碰撞在了一起,...

    Miyang 評(píng)論0 收藏0
  • 簡(jiǎn)析 js 碰撞檢測(cè)原理與算法實(shí)現(xiàn)

    摘要:碰撞檢測(cè)邊界檢測(cè)在前端游戲,以及涉及拖拽交互的場(chǎng)景應(yīng)用十分廣泛。這就涉及到碰撞檢測(cè)或者叫邊界檢測(cè)的問(wèn)題了。若四邊均未發(fā)生重合,則未發(fā)生碰撞,反之則發(fā)生碰撞。目前業(yè)務(wù)有遇到碰撞需求,所以抽時(shí)間整理了下。 碰撞檢測(cè)(邊界檢測(cè))在前端游戲,以及涉及拖拽交互的場(chǎng)景應(yīng)用十分廣泛。 那么啥叫碰撞?JavaScript 又是如何檢測(cè) DOM 發(fā)生碰撞的呢? 碰撞,顧名思義,就是兩個(gè)物體碰撞在了一起,...

    Markxu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Dogee

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<