成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

碰撞檢測

Dogee / 2122人閱讀

摘要:碰撞檢測剛才回答了一個游戲的問答。心血來潮,就想寫寫碰撞檢測,廢話不多說,直接懟。矩形和矩形的碰撞檢測現(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.xrect.x+rect.w){return rect.x+rect.w}
else{return circle.x}
//我們再去找y軸,同樣的道理.
if(circle.yrect.y+rect.h){return rect.y+rect.h}
else{return circle.y}
//有上面我們獲得到的量,去計算就可以了,這就很簡單了。

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

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

橢圓與橢圓碰撞檢測 其他的檢測手段

不管什么東西,老夫就是正面剛
1.canvascontext.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

相關(guān)文章

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

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

    ybak 評論0 收藏0
  • Chrome 小恐龍游戲源碼探究九 -- 游戲碰撞檢測

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

    cpupro 評論0 收藏0
  • 簡析 js 碰撞檢測原理與算法實現(xiàn)

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

    Miyang 評論0 收藏0
  • 簡析 js 碰撞檢測原理與算法實現(xiàn)

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

    Markxu 評論0 收藏0

發(fā)表評論

0條評論

Dogee

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<