PixiJS V5 教學 (18) - boxesIntersect

發表於 2020-06-08 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

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

前言

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

碰撞檢測程式碼分析

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

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(); 會取得傳入的相關參數

ab = {
  height: 105,
  type: 1,
  width: 105,
  x: -52.5,
  y: -52.5,
}

反之 b.getBounds() 相同。

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

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