PixiJS V5 教學 (18) - boxesIntersect
前言
接下來稍微讓我們回顧一下前面沒講的東西,也就是 boxesIntersect
的參數。
碰撞檢測程式碼分析
前面我們有講到,我們會透過 boxesIntersect
回傳的結果來判斷結果是為 true
還是 false
1 | function boxesIntersect(a, b) |
但是在那之前我們先了解一下 boxesIntersect
到底 return
了什麼以及 getBounds
是在取得什麼,這邊將會使用前面章節的範例來做介紹
getBounds()
首先 a.getBounds();
會取得傳入的相關參數
1 | ab = { |
反之 b.getBounds()
相同。
1 | bb = { |
return
接下來 return
的部分是在做什麼呢?其實在這部分邏輯會稍微複雜一點,首先必須先知道 JavaScript 有所謂的運算子優先性及相依性,這部分就不詳細講,因為這並不是這一次的主題,有想要了解 JavaScript 的優先及相依性可以看 本篇 MDN。
首先讓我們拆解一下每一個階段的比較
1 | return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height; |
第一段比較
1 | ab.x + ab.width > bb.x |
第二段比較
1 | ab.x < bb.x + bb.width |
第三段比較
1 | ab.y + ab.height > bb.y |
第四段比較
1 | ab.y < bb.y + bb.height |
最後 &&
在中,若有一個為 false
就會回傳 false
,所以我們才會回傳 false
1 | return false && true && false && true // false |
基本上會變動的參數只有第一個,也就是 var ab = a.getBounds();
,所以當 container
碰到第二個 container2
就會變成 ture
,在這邊我們可以故意弄到碰撞後再拉出公式比較
碰撞後的 ab
1 | ab = { |
接下來一樣列出比較會更清楚
1 | ab.x + ab.width > bb.x |
第二段比較
1 | ab.x < bb.x + bb.width |
第三段比較
1 | ab.y + ab.height > bb.y |
第四段比較
1 | ab.y < bb.y + bb.height |
最後結果
1 | return true && true && true && true // 此時就會碰撞 |