PixiJS 如何實作連連看盤面與消除邏輯

Q: 盤面生成後一定有解嗎？

隨機生成不保證一定有解。正式遊戲應在生成後呼叫 `getFirstExistPath()`，若沒有可消除路徑就重新洗牌。

Q: PixiJS v4 的 loader 和 PixiJS v8 的 Assets 一樣嗎？

PixiJS v4 常見寫法是 `PIXI.loader` 或 `PIXI.loaders.Loader`。PixiJS v8 主要使用 `Assets.load()`，但進度回呼與資源快取的概念相同。

PixiJS 連連看盤面可以用 Container 管理格子與角色圖，用 Sprite 或 AnimatedSprite 顯示每個圖塊，再把盤面資料交給 Board 與 Path 判斷兩個點是否能在最多兩次轉折內連線消除。

PixiJS 盤面需要哪些顯示物件？

PixiJS 盤面最常用的顯示物件是 Container、Sprite 與 AnimatedSprite。Container 負責分組，Sprite 顯示靜態圖，AnimatedSprite 顯示逐格動畫。

我先建立顯示層概念：

let container = new PIXI.Container();
container.addChild(sprite);

PixiJS 官方文件把 asset loading、texture、sprite、spritesheet 與 cache 視為遊戲畫面建立的基礎。連連看盤面若有多個角色圖，通常會用 spritesheet 載入後，再依盤面數字挑出對應 texture。

連連看的資料盤面怎麼建立？

連連看盤面需要一份二維陣列表示每格內容。相同數字代表同一種圖塊，null 代表已消除或空格。

我寫的 Board 類別用 25 種內容各複製多次，再打散成 10x10 盤面：

export class Board {
  public board: Array<Array<number>>;

  constructor() {
    const content = [
      0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
      10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
      20, 21, 22, 23, 24,
    ];
    const length = 10;
    const data = content
      .concat(content)
      .concat(content)
      .concat(content)
      .sort(() => (Math.random() > 0.5 ? 1 : -1));

    this.board = [];
    for (let i = 0; i < length; i++) {
      this.board.push(data.slice(i * length, (i + 1) * length));
    }
  }
}

正式遊戲要避免 sort(() => Math.random() > .5) 這類不穩定洗牌，建議改用 Fisher-Yates shuffle，並在生成後檢查盤面是否至少有一組可消除路徑。

Path 類別如何判斷兩個圖塊可連線？

連連看連線判斷的核心是檢查兩點之間是否能用直線、一次轉折或兩次轉折連通。Path 類別應回傳是否可消除，以及實際連線座標。

我寫的 Path.canLinkInLine() 主要分成六種方向檢查：

從上方繞線。
從下方繞線。
從左側繞線。
從右側繞線。
左右方向連消。
上下方向連消。

判斷邏輯會搭配 Board.hasMiddleValue(pointA, pointB) 檢查兩點之間是否有阻擋。若路徑成立，就把 path_Detail 設為 [起點, 轉折點一, 轉折點二, 終點]，讓畫面層可以用 Graphics 畫出連線。

Board 還需要哪些輔助方法？

Board 不只保存二維陣列，還需要查找同值位置、判斷遊戲是否結束、尋找第一組可消除路徑與取得某方向最近阻擋點。

實作上常見方法如下：

方法	用途
`gameRoundEnd()`	檢查盤面是否全部消除
`getPositionByValue(value)`	找出同一圖塊的所有座標
`getFirstExistPath()`	找提示功能可用的一組路徑
`hasMiddleValue(a, b)`	判斷兩點直線之間是否有阻擋
`getNearByPointByDirection(point, direction)`	找某方向可延伸到哪裡

這種拆法的好處是顯示層不用理解所有消除規則。PixiJS 只負責把使用者點擊轉成座標，再呼叫 Board/Path 得到結果。

PixiJS 畫面如何套入連線邏輯？

PixiJS 畫面層應把盤面數字轉成 sprite，點擊兩個 sprite 後交給 Path 判斷，若可消除就移除 sprite 並畫出短暫連線效果。

建議互動流程：

建立 Board 資料。
依 board[x][y] 產生對應 sprite。
每個 sprite 設定 interactive 與 click handler。
記錄第一次選取座標。
第二次選取時建立 Path(point1, point2, board)。
若 canLinkInLine() 成立，將兩格設為 null，並移除或播放消除動畫。
依 path_Detail 用 PIXI.Graphics 畫連線。

常見問題

QPixiJS 連連看盤面要用 Container 嗎？

PixiJS 連連看盤面建議用 Container。Container 可以集中管理棋盤、角色圖塊、連線效果與 UI 按鈕，後續切換場景也比較方便。

QSprite 和 AnimatedSprite 差在哪裡？

Sprite 顯示單張 texture，適合靜態圖塊。AnimatedSprite 會播放多張 texture，適合角色待機、消除或提示動畫。

Q連連看最多兩次轉折怎麼判斷？

常見做法是先判斷直線，再判斷一次轉折，最後判斷兩次轉折。我的做法是沿上下左右延伸，找出能避開阻擋物的中繼點。

Q盤面生成後一定有解嗎？

隨機生成不保證一定有解。正式遊戲應在生成後呼叫 getFirstExistPath()，若沒有可消除路徑就重新洗牌。

QPixiJS v4 的 loader 和 PixiJS v8 的 Assets 一樣嗎？

PixiJS v4 常見寫法是 PIXI.loader 或 PIXI.loaders.Loader。PixiJS v8 主要使用 Assets.load()，但進度回呼與資源快取的概念相同。

參考資料

PixiJS Assets Guide: https://pixijs.com/8.x/guides/components/assets
PixiJS Loader API: https://api.pixijs.io/@pixi/loaders/PIXI/Loader.html
PixiJS Sprite documentation: https://pixijs.download/release/docs/PIXI.Sprite.html

最後更新

本文最後更新於 2026-08-28，依原始 PixiJS 連連看盤面實作整理為可發布的 GEO 技術文章。

關於作者

Claire Chang ｜企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。

首次發布：2018-11-03