PixiJS V5 教學 (18) - boxesIntersect

前言

接下來稍微讓我們回顧一下前面沒講的東西,也就是 boxesIntersect 的參數。

碰撞檢測程式碼分析

前面我們有講到,我們會透過 boxesIntersect 回傳的結果來判斷結果是為 true 還是 false

1
2
3
4
5
6
function boxesIntersect(a, b)
{
var ab = a.getBounds();
var bb = b.getBounds();
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;
}

但是在那之前我們先了解一下 boxesIntersect 到底 return 了什麼以及 getBounds 是在取得什麼,這邊將會使用前面章節的範例來做介紹

getBounds()

首先 a.getBounds(); 會取得傳入的相關參數

1
2
3
4
5
6
7
ab = {
height: 105,
type: 1,
width: 105,
x: -52.5,
y: -52.5,
}

反之 b.getBounds() 相同。

1
2
3
4
5
6
7
bb = {
height: 105,
type: 1,
width: 105,
x: 147.5,
y: 147.5,
}

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
2
ab.x + ab.width > bb.x
-52.5 + 105 > 147.5 // false, 52.5 > 147.5

第二段比較

1
2
ab.x < bb.x + bb.width
-52.5 < 147.5 + 105 // true,-52.5 < 252.5

第三段比較

1
2
ab.y + ab.height > bb.y
-52.5 + 105 > 147.5 // false,-52.5 > 147.5

第四段比較

1
2
ab.y < bb.y + bb.height
-52.5 < 147.5 + 105 // true,-52.5 < 252.5

最後 && 在中,若有一個為 false 就會回傳 false,所以我們才會回傳 false

1
return false && true && false && true // false

基本上會變動的參數只有第一個,也就是 var ab = a.getBounds();,所以當 container 碰到第二個 container2 就會變成 ture,在這邊我們可以故意弄到碰撞後再拉出公式比較

碰撞後的 ab

1
2
3
4
5
6
7
ab = {
height: 105,
type: 1,
width: 105,
x: 47.5,
y: 62.5,
}

接下來一樣列出比較會更清楚

1
2
ab.x + ab.width > bb.x
47.5 + 105 > 147.5 // ture, 148 > 147.5

第二段比較

1
2
ab.x < bb.x + bb.width
47.5 < 147.5 + 105 // ture,47.5 < 148

第三段比較

1
2
ab.y + ab.height > bb.y
62.5 + 105 > 147.5 // true,163 > 147.5

第四段比較

1
2
ab.y < bb.y + bb.height
62.5 < 147.5 + 105 // true,62.5 < 252.5

最後結果

1
return true && true && true && true // 此時就會碰撞

參考文獻

0%