if (x1 < x2 + width2 && x1 + width1 > x2 && y1 < y2 + height2 &&
        y1 + height1 > y2) {
      return true;
    }
    return false;

以上這段程式碼是什麼呢？
這段程式碼是「兩個方形物體是否有接觸」的判斷式。

這可以應用在哪些地方？
例如「車子是否有在路口前壓線？」判斷方式就是將整個路口做成一個大型方塊，然後車子就是小方塊。
或是「玩家角色是否碰到牆壁？」判斷方式就是將牆壁當成一個方塊，然後玩家角色就是小方塊。
甚至是最基本的「子彈是否有擊中東西？」判斷方式就是將目標當成一個方塊，然後子彈就是小方塊。

在Flame（與其他許許多多遊戲引擎）中，它提供了一套系統，稱為Collision，是用來判斷兩個Component之間是否發生了接觸。
發生接觸後，設計師可以決定....是否要將玩家角色前進的速度歸零？是否要將玩家墜落的速度歸零？是否要啟動NPC的特殊動畫（暗示玩家可以和該角色互動）？

class SlotComponent extends PositionComponent with CollisionCallbacks {
  @override
  void onCollisionStart(
      Set<Vector2> intersectionPoints,
      PositionComponent other,
      ) 

  @override
  void onCollisionEnd(PositionComponent other) 

  @override
  void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) 
}

可以看出來，使用Collision的方式是在Component物件上擴充實作一個叫做「CollisionCallbacks」的方法。

實作以後，這個Component物件會自動將所有和自己發生接觸的Component傳入函數內、執行你希望它執行的處理動作/程序/功能（隨便你怎麼稱呼）。

但是事情不是這麼簡單，外面的FlameGame也要擴充實作一個「HasCollisionDetection」

class MyGame3 extends BaseGame with HasCollisionDetection {
}

只要這樣，你的遊戲內的物件就會有「接觸偵測」的能力了....最好是這麼順利！

可能是因為FlutterWeb環境的關係吧！
這套系統到目前為止還無法順利運作。

很想花力氣少出原因，但，都知道怎麼做碰撞偵測了，為什麼要花那些心力去虐待自己的大腦顳葉呢？自己刻一套吧！