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%