嗨！大家好，我是小螞蟻。今天我們繼續學習做遊戲。
在第四節中我們實作了圖形的拖拽功能，拖拽的圖形最終需要被放置在網格的對應位置上。
先說一下實作思路：
使用拖拽圖形上的左下角的位置作為圖形位置，與整個網格的位置進行比對。如果圖形位置與目前單元格的位置比對，則根據圖形的資料從目前的單元格開始填充，直到填充完整個圖形為止。
看不懂？沒關系。接着往下我會一步一步的進行拆解和分析。
計算拖拽圖形左下角的位置作為圖形的比對位置
如圖，是要拖拽的圖形，由四個正方形組成的“田字”形，每個正方形的邊長是60，兩個正方形之間的間隔是2。左下方的紅色圓點為我們将會計算的圖形位置。假設目前圖形的中點位置(即坐标軸的中心)為（x，y)，根據正方形的邊長和間隔，可以計算出紅色的點的位置是(x-31，y-31)。
在場景加入四個邊長為60的正方形，将四個正方形同時選中，點選滑鼠右鍵，選擇“将選中圖層組成容器”。将它們放在一個容器下。
如圖，四個正方形被放在了“容器-1”中。坐标軸中心的位置即為“容器-1”的坐标位置。
在遊戲中每個圖形都是由多個正方形組成，我們會統一使用容器來打包這些正方形，作為圖形使用。
容器中的四個正方形的坐标位置分别是這樣的。
為什麼要使用左下角的位置作為圖形位置與網格位置進行比對呢？
理由一：便于确定圖形想要放置的位置。
假設現在我們使用圖形的中心位置作為比對位置。
如圖，圖形的中心位置位于第二行第二列的網格中，但是這個田字形的圖形應該安放在哪裡呢？不是很直覺，也不太好判斷。
現在我們将圖形的左下方位置作為比對位置。
如圖， 左下方的藍點目前位于第一行第一列的格子中，可以很容易的看出目前圖形是想要放在左下角的四個格子中，像下面這樣。
最終的比對位置的計算可以進行“四舍五入”處理，這樣能夠容許一定的位置偏移和誤差，即隻要位置差不多的話，圖形就應該被放置上去。
理由二：便于圖形的繪制，我們将會總是從左下角的位置開始周遊繪制整個圖形。後續會進行解釋。
用圖形位置與網格位置進行比對
假設目前的“田字”圖形位于網格的正中間。
在繪制網格一節中，我們已經講過了如何計算網格左下角的起點位置。根據圖形目前的位置（藍點），網格起點（紅點）位置以及單元格的邊長，就能夠計算出目前圖形左下方的點（藍點）位于網格中的行号和列号。圖中目前藍點位于第5行第5列的格子中，我們将會從這個格子開始繪制整個田字圖形。
圖形點（x，y），網格起點（a，b），單元格邊長n
行号 = (y-b)/n + 1
列号 = (x-a)/n + 1
擷取到行号和列号後，就可以進行下一步填充操作了。
在網格上填充圖形
實作思路：擷取到目前圖形在網格中的位置，也就是我們上一步的操作。從目前位置開始，根據圖形的資料依次填充網格中的單元格。
依舊很難了解？沒關系，接着看。
第一節中我們講過，計算機隻能夠了解資料，我們所看到的圖形，想要計算機能夠了解，就需要映射成資料，像下面這樣，第一個“田字”圖形其實是由兩行兩列的“1”組成。
下面我們就為“田字”圖形設定資料。選中“容器-1”，為其添加一個局部變量表格資料，命名“形狀資料”。
在表格中增加兩行兩列資料，并且都設定為1。（圖形由四個正方形組成，是以四個數值都是1）
接下來，為“容器-1”增加一些變量，在稍後實作邏輯時會使用。
“容器-1”的局部變量：
- 被按住：目前圖形是否被按住，用于圖形的拖拽。
- 網格位置X/Y: 記錄目前圖形位于整個網格的哪一行，哪一列。
- 行号/列号：用于田字圖形的表格資料的周遊。
- 起點偏移X/Y:用于計算圖形的左下角的點的位置。
全局變量：
- 全局-列号/行号：用于記錄要填充的方格的行号和列号。
- 全局-單個格子邊長：每個正方形單元格的邊長。
- 全局-總行數/列數：網格一共多少行，多少列。
- 全局-起點X/Y坐标：整個網格的左下角的起點位置。
你可能注意到了，我在所有的全局變量前增加了字首“全局-”，這樣，當你在積木塊中選擇變量時可以很容易的将全局變量與局部變量區分開，尤其是當變量很多的時候，這是一個不錯的習慣，推薦你使用。
接下來，我們先在場景中增加一個“填充方塊”，用于在網格上進行填充。
如圖，在場景中加入了一個填充方塊，為了與紅色的拖拽圖形區分開，把它設定成綠色。
為其增加如下的積木邏輯。
邏輯不複雜，當自己被克隆出來後，将自己設定到網格中的對應位置。
接着，選擇“容器-1”，為其增加如下的積木邏輯：
重點包含兩部分的邏輯，被拖拽時，計算圖形位于網格中的位置。手放開時，從目前的位置開始，周遊目前圖形的資料，并在網格上對應的位置填充方塊。
點選“預覽場景”，看一下效果。
拖拽圖形放置在網格上，就會在對應的位置上填充圖形。觀察一下，即使拖拽圖形的位置與網格的位置有一些偏差，也會在正确的位置上進行填充。這樣會給玩家帶來比較良好的遊戲體驗：雖然你的手指頭控制的不是很精準，但是沒關系，我知道你其實是想放在那裡的。
總結一下
這一節我們了解了如何将拖拽的形狀填充到網格中，包括實作思路以及具體的實作方法。雖然包含了比較多的計算，但是這些計算其實都不複雜，對照着圖檔在紙上畫一下更容易了解。