繼昨天我們稍微介紹了補間動畫，並完成了投擲飛鏢的移動過程，且在最後提到了關於飛鏢會飛出舞台的問題，所以首先我們先來解決這個問題，接著在繼續設置標靶的部分。

顯示物件遮罩

在 建立圖層佈局 中，若是我們將某個顯示物件 A 加入到另一個顯示物件 B 之中，並且將其名子取為 mask，則該顯示物件 A 將不再具有顯示圖案的功能，而是會變成一個遮罩，會讓顯示物件 B 內只顯示出被顯示物件 A 遮住的地方。

除了 Day 1 以外我都沒有特別提到，CG 的繪圖引擎是使用 Pixi.js，就是負責將圖片顯示在網頁上的工具，所以前陣子介紹的所有跟圖層、顯示物件相關的部分，實際上也是在介紹 Pixi.js。

讓我們打開建立 gameRoot 的建立圖層佈局，並直接新增一個名字為 mask 的 方形，作為遮罩用途的顯示物件，必須完整的覆蓋住我們要限定的地方，也就是舞台。

因此我們要設定其 寬、高 等同於舞台大小，圓角 為 0，才可以完整覆蓋住舞台，另外要確保 位置 位於舞台的正中心，也就是預設新增的位置。

設定完成後儲存並測試一次，就可以看到飛鏢已經不會再飛出舞台外了。

設置標靶

接下來就是要來設置標靶了，回到剛剛的 建立圖層佈局 中，現在有一個問題，那就是剛剛的遮罩物件都把我們的舞台擋住了，不過沒關係，只要該物件的 透明度 不為 0，就有辦法發揮效果，所以我們可以將其透明度調整為 0.01，這樣就幾乎等於看不到了。

接下來與設置飛鏢的步驟一樣，先新增一個 容器，並將其取名為 target 後，進入容器之中，利用之前載入的標靶圖片資源，新增兩個標靶物件，上方的取名為 target_shadow，下方則為 target_clip，並修改影子的參數，使其結果如上圖所示。

接著退出容器，將 target 的物件排序拉到飛鏢 dart 上方，使飛鏢的圖層在標靶之上，並改變標靶的位置到舞台上方，例如我是改變 y 成 200。

擊中標靶

接下來我們要來實作擊中標靶的部分，這裡會用到我們在 [Day 07] 事件表實作 - 檢查篇（下） 教過的檢查觀念——針對物件的迴圈檢查，不同的是當時舉例的是光暈戰記模組裡面的檢查，但原理都一樣。

首先我們要先能夠找出所有的飛鏢，並檢查它們各自與標靶的距離，利用距離的長短來判斷它們是否碰到，因此我們先新增一個事件 擊中標靶，接著新增檢查 For Each，在 迴圈 裡面。

其中要注意的是這個檢查尋找物件的方式、條件，如上圖中所示，提供了 * 與 + 兩種搜尋方式，而我們要使用的是 +，因為我們的飛鏢總共有兩種，一種是當作發射點的裝飾性飛鏢 dart，另一種是真正被投擲出去的飛鏢 dart*，說明中提到我們若是使用 dart* 來搜尋的話，會搜尋所有 ID 開頭為 dart 的物件，包含 dart 本身，但我們不需要連發射點的飛鏢都納入，所以在這裡要使用 dart+，也就是排除了 ID 為 dart 以外的其他開頭為 dart 的物件，並且將其物件儲存在區域變數 instance 中。

接著還有一點，那就是開頭為 dart 的物件其實並不只有飛鏢的容器，還有飛鏢的本體與影子，由於他們的 ID 也符合迴圈的搜索條件，因此我們要將其排除。

利用檢查 比對字串，來檢查當前迴圈的物件 ID 內是否不包含 _，因為本體和影子的物件 ID 內都存在著 _，若當前的物件 ID 內沒有 _ 符號，則代表其為容器，可以繼續往下檢查，由於這裡並沒有不包含的檢查方式，所以我們要先利用 包含字串 檢查，之後再將檢查結果反轉，也就是下方的 _not 要記得打勾。

接著新增檢查 物件重疊，在目錄 顯示 內，顧名思義這個檢查就是用來判斷兩個顯示物件有沒有重疊在一起，我們要來檢查當前迴圈的物件有沒有和標靶 target 碰在一起，檢查方式 是 距離，因為預設的圖形邊界是利用顯示物件的尺寸去計算的，但我們的容器除了本體以外，還包含了影子，這會影響到容器的尺寸，所以不太適合，因此我們直接以距離來判斷，而根據我的測試，120 似乎滿適合的，所以我決定以這個距離為主。

檢查的部分就到此為止，只要通過這些檢查，就代表有某個飛鏢與標靶碰在一起，這時我們就要將該飛鏢移除，並改變標靶的位置。

首先是新增動作 移除物件，物件ID 自然就是 {instance}，當前迴圈中的飛鏢物件。

再來是新增動作 更新顯示物件，物件的ID 為 target，使用 設定位置，為了讓標靶隨機的左右移動，我們就是要來改變其 x 座標，這時就又需要用到我們曾經提過的數學函數了，而這一次需要的是 random(a, b)，可以得到一個 a ~ b（不包含）的隨機數。

至於移動的目的地要怎麼算呢？由於我們的舞台尺寸的 x 為 640，所以我們只要讓隨機數的區間在 0 ~ 640 就好了，但如果標靶直接放在 x = 0 的位置，就會被舞台邊界給切掉，所以這時我們可以往內縮一點，例如變成 100 ~ 540，這樣就不會被切掉了，因此我們可以直接在 x 的欄位填入 random(100, 540) 即可。

事件表本身有提供一個預設的變數可以讀取舞台寬高，stage.width、stage.height，所以上述的數學式也可以寫成 random(100, {stage.width} - 100)。

完成後我們就可以來測試遊戲啦～使用飛鏢擊中標靶，就可以看到擊中標靶的飛鏢消失了，且標靶也改變了位置，但似乎瞬間移動的標靶似乎有點空虛，所以我們來利用昨天教的 補間動畫 吧！

打開剛剛設置標靶移動的更新顯示物件，啟用 設定補間動畫，補間方式、時機 選擇 Cubic Out（三次方淡出），時間 設為 200 毫秒，完成後儲存。

最後再測試一次，就可以看到標靶真的會左右移動了，畫面裡會動的東西越多，看起來就越豐富，但不覺得還是少了什麼嗎？沒錯！音效！明天我們就要來推薦一些我覺得還不錯的無版權素材網站，不管是音樂、音效、圖片等都可以找到許多別人分享的素材，並且將它們加入到我們的遊戲中。

CG 範例事件表

總結

今天為舞台設置了一個遮罩，讓其只顯示在舞台內的顯示物件，並且設置了標靶，也完成了飛鏢擊中標靶的事件處理，但擊中後的回饋感似乎還是不足，所以明天我們會從無版權的素材網站上找一些適合的音效，將其加入到我們的遊戲之中！