10 APP專題： 拼圖遊戲 10.1 專題介紹：拼圖遊戲 10.2 ImageSprite 物件清單的拖曳 10.3 拼圖遊戲設計 10.1 專題介紹：拼圖遊戲 10.2 ImageSprite 物件清單的拖曳 10.3 拼圖遊戲設計 拼圖遊戲是簡單又有趣的遊戲，可以事先使用繪圖軟體，將一張完整的圖片分割 成若干張的小圖片並給予編號， 再將這些小圖片依編號組合，即可以進行拼圖的 遊戲。 遊戲開始會從 3 張圖片中隨機抽出一張 ( 每張圖片事先都已經切割成 9 張小圖 片 )，按下 Start 按鈕即將小圖片打散並開始計時。

10.1 專題介紹：拼圖遊戲 拼圖遊戲是很多人愛玩的遊戲，遊戲開始會從 3 張圖片中隨機抽出一張 ( 每張圖片 事先都已經切割成 9 張小圖片 )，按下 Start 按鈕即將小圖片打散並開始計時。 回 首頁

按下 Stop 按鈕則暫停計時，當 9 張小圖片都放在正確的位置時，即完成遊戲。

10.2 ImageSprite 物件清單的拖曳 回 10.2.1 單一 ImageSprite 元件的拖曳 首頁 當觸碰布置在 Canvas 上的 ImageSprite 元件時會觸發 TouchDown(number x, number y) 事件，並傳回觸碰的座標位置 (x,y)，因此利用 TouchDown() 事件， 可 以 記 錄 拖 曳 時 第 一 次 觸 碰 的 點。 結 束 觸 碰 ImageSprite 元 件 會 觸 發TouchUp(number x, number y) 事件， (x,y) 座標為觸碰 ImageSprite 元件時 按下 TouchDown() 事件時記錄的位置。 回 首頁

ImageSprite 元件的拖曳 拖 曳 ImageSprite 元 件 時 會 觸 發 Dragged 事 件， 並 接 收 一 系 列 的 參 數， 其中 (startX,startY) 為 第 一 次 觸 碰 的 點，(prevX,prevY) 為 上 一 次 的 觸 碰 點， (currentX,currentY) 為目前的觸碰點。

ImageSprite 元件的 Z 屬性 如果 Canvas 上有多個動畫元件，通常會將被拖曳的元件移至最上層。利用 ImageSprite1 元件的 Z 屬性即可達成。ImageSprite 元件的 Z 屬性表示該元件的 層次，Z 值愈大表示愈上層。如下圖：撲克牌 Q 在撲克牌 J 的上方。 在介面配置階段，建立的 ImageSprite 元件，預設的 Z 屬性為 1.0，如果建立多個 ImageSprite 元件，所有元件的 Z 屬性都是 1.0。由於所有的 ImageSprite 元件的 Z 屬性都是 1.0，App Inventor 會將較後建立或較後拖曳的 ImageSprite 元件放置 在最上層。 也可以在程式執行階段，設定 Z 屬性將該元件移至上層。 例如： 設定 ImageSprite1.Z=2.0 則 ImageSprite1 將移至其他 ImageSprite 屬性 Z=1.0 元件的上層。

10.2.2 多個ImageSprite 元件的拖曳 建立物件清單 例如：程式初始時將 ImageSprite1、ImageSprite2 元件載入至 PokeList 物件清 單中。

記錄物件編號 例 如：PieceNo=1 記 錄 觸 碰 的 是 ImageSprite1、 PieceNo=2 記 錄 觸 碰 的 是 ImageSprite2 。

在自訂程序中取得元件 依 PieceNo 編 號， 自 PokeList 清 單 中 取 得 拖 曳 的 ImageSprite 元 件， 當 PieceNo=1 時，取得 ImageSprite1，當 PieceNo=2 時，取得 ImageSprite2。

範例：撲克牌的拖曳 畫布上有兩張撲克牌，當觸碰撲克牌後即可將拖曳的牌移至最上層並進行拖曳，放 開撲克牌後會比對拖曳的牌是否和另一張牌重疊，如果是則以對話方塊顯示重疊訊 息。<ch10\ex_Poke.zip> 執行情形 拖曳撲克牌 J 並和撲克牌 Q 重疊，如右下圖：撲克牌 J 移至最上層，並顯示「兩張 牌重疊 !」對話方塊。

10.3 拼圖遊戲設計 10.3.1 專題發想 本專題是一個使用物件拖曳的典型範例，除了必須將拖曳物件移至最上層並正確的 控制拖曳外，還要避免物件超出邊界，同時也要判斷是否拖曳到正確的位置。而且 正確位置的判斷也不能太嚴謹，必須帶有一點模糊，否則不容易拖曳到正確的位置 上。 為了記錄每張小圖片，是否拖曳到正確的位置，必須使用清單來記錄，並在程式初 始時，先將這些狀態記錄在清單中。 此外，對於不同版面大小的行動裝置，也要一併考量，所以拼圖的大小必須依版面 大小來計算，同時，每張圖片的位置是以動態的方式計算完成，這也是對不同版面 行動裝置規劃的一種處理方式。 回 首頁

10.3.2 專題總覽 按下 Start 按鈕即將小圖片以亂數打散， 並開始以秒計時。 按下 Stop 按鈕則暫停計時，當 9 張小 圖片都放在正確的位置時，即完成遊戲。

10.3.3 介面配置 Screen 中主要包含 HorArrCommand 和 Canvas1 兩個版面， HorArrCommand 包含 顯示時間的 LabelShowTime 標籤和 ButtonStart 啟動遊戲按 鈕，Canvas1 則包含 ImageSprite1~ImageSp rite9 等 9 張切割後的小 圖片，此外也以 Clock 來 計時、Player 播放音效、 Notifier 顯示對話方塊。 版面元件如下圖。

10.3.4 專題分析和程式拼塊說明 建 立 全 域 變 數 ImageList、InitPositionImgList、imgStatus、x、y、InitX0、 InitY0、CavasHeight、PieceHeight、PieceWidth、Columns 和 length。

建立按下 Start 遊戲開始按鈕使用的全域變數 FilePth、TempFile、PieceNo、 IsStart 、 IsPlay 和 TimeCount。

遊戲進行後，必須判斷小圖片是否拖曳到原來的初始位置。必須建立下列的 全 域 變 數 flag、SplitData、CurrentX、CurrentY、InitPositionImgX 、 InitPositionImgY、 offset、TempX 和 TempY。

執行初始，依行動裝置版面的大小，計算顯示拼圖的 Canvas 大小，再算出 Canvas 切割成 3X3 的小圖片時，每張小圖片的 Width 和 Hieght 。

自訂的程序 initList()。

自訂的程序 InitGame() 從 3 張圖中以亂數隨機選取 任意 1 張，並整齊排列。

自訂的程序繪製拼圖區的外框。

按下 Start 遊戲開始按鈕的處理。

將小圖片打散。

計時器以秒計時並顯示。 觸 碰 ImageSprite ( 小 圖 片 )， 以 PieceNo 變 數 記 錄 小 圖 片 的 編 號。 由 於 ImageSprite1~ImageSprite9 的 架 構 均 相 同， 我 們 只 列 出 ImageSprite1 的 TouchDown 事件。

當 拖 曳 小 圖 片 時， 會 以 自 訂 的 MoveImageSprite 程 序 拖 曳 小 圖 片， 由 於 ImageSprite1~ImageSprite9 的 架 構 均 相 同， 我 們 只 列 出 ImageSprite1 的 Dragged 事件。

以自訂的 MoveImageSprite 程序拖曳小圖片。

結束 ImageSprite 拖曳，會觸發 TouchUp 事件，並以自訂的 IsCorrect 判斷 是否拖曳到正確的初始位置上。由於 ImageSprite1~ImageSprite9 的架構均相 同，我們只列出 ImageSprite1 的 TouchUp 事件。

以自訂的 IsCorrect 判 斷是否拖曳至正確的初始 位置上。

以自訂的 CheckFinish 判斷是否完成遊戲。 當遊戲完成時，所有的 imgStatus 均為 true，反過來說，只要有找到任意一張 小圖片的 imgStatus 為 false ，即表示遊戲尚未完成。

詢問遊戲是否繼續 。

10.3.5 未來展望 拖曳是行動裝置最常使用的功能，學會了這個專題，可以將這個原理應用在如翻閱 書籍、相簿等範例，或是拼盤、撲克牌、下棋等遊戲中。 這個專題我們也學習到了模糊理論，如果我們嚴格限定拖曳物件必須很正確的移回 到初始位置才算完成拖曳動作，則實際上將無法達成，因此改為只要拖曳到合理範 圍內即算完成。在實務上，這也是經常使用的一種技巧。