是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2020-06-08 JavaScript

PixiJS V5 教學 (18) - boxesIntersect

#JavaScript #PixiJS V5 教學 #PixiJS #Canvas #w3HexSchool

前言

接下來稍微讓我們回顧一下前面沒講的東西，也就是 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 // true， 148 > 147.5

第二段比較

1
2
ab.x < bb.x + bb.width
47.5 < 147.5 + 105 // true，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 // 此時就會碰撞

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

Buy Me A Coffee | Portaly

我想要說...

ray — -zsh — 80x24
➜ ~ mkdir israynotarray
➜ ~ cd israynotarray
➜ israynotarray git:(main) pnpm run start

相關文章

PixiJS V5 教學 (40) - 終章

2020-11-11

PixiJS V5 教學 (39) - 音樂

2020-11-02

PixiJS V5 教學 (38) - TexturePacker

2020-10-31

PixiJS V5 教學 (37) - 加入 stats.js

2020-10-21

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme