本文首發于微信公眾號【小螞蟻教你做游戲】，歡迎關注領取更多學習做游戲的原創教程資料，每天學點兒游戲開發知識。

嗨！大家好，我是小螞蟻。

(資料圖片僅供參考)

最近“羊了個羊”小游戲爆火。一下子讓想做微信小游戲或者想學做微信小游戲的人多了很多，因為小螞蟻一直都在長期的制作微信小游戲開發的教程，以及制作微信小游戲，所以我無緣無故的也因為這波熱度得到了不少的“羊毛”。

不少人建議我寫個“羊了個羊”游戲的制作教程，想了一下，為什么不寫呢？反正我也是要長期持續寫教程的，寫別的游戲也是寫，那為什么不寫寫當下如此爆火的游戲呢？羊毛都懟到臉上了，再不薅幾把就顯得有點兒奇怪了。

好了，廢話不多說了。歡迎跟隨者小螞蟻開啟你的游戲開發制作之旅。

這個系列教程會包含很多節（我也不知道幾節能夠寫完），我會帶你從零開始制作一個“羊了個羊”類型的消除游戲。通過學習教程，你將能夠自己動手制作一個“羊了個羊”類型的游戲，并且是一個第二關可以闖過的游戲。

教程所使用的游戲開發工具是【微信小游戲制作工具】，這是微信官方出品的用于制作微信小游戲的開發工具，全中文環境，可視化的積木編程，面向的是沒有任何開發經驗的普通人，很容易上手，借助它你可以快速的制作出自己的微信小游戲。

接下來，讓我們正式開始第一節的內容吧！

“羊了個羊”游戲本質上還是一個消除游戲，在下方的槽中湊滿三個一樣的圖標即可消除。它跟其它消除游戲的最大的不同，在于它的布局方式上。一般的消除游戲都是一種平面的布局，即整體上是幾行幾列的平面，但是“羊了個羊”游戲中是一種堆疊的布局，即在一層上會疊加另一層，甚至很多層。

這比平面的布局多了一個“層”的概念，圖標是一層一層排列的，第一層的圖標上如果有第二層圖標壓著它，那它就不可拾取，這個多層的堆疊布局就是這個游戲實現的難點之一。

這節課中我們就先來解決這個“堆疊牌拾取”的難點。

如圖，我們將會制作一個這樣的示例，一共有兩層牌，第一層牌是 3 行 x 5 列，第二層牌是 3 行 x 4列。可拾取的牌用白色表示，不可拾取的牌用紅色表示，游戲開始后，顯示兩層牌的布局，點擊白色牌時，白色牌消失（相當于拾取），點擊紅色牌，紅色牌不會消失（相當于不可拾取），每拾取一張牌后，所有剩余牌的狀態都會刷新，如果當前牌由不可拾取狀態，變為可拾取狀態，則它的顏色會由紅色變為白色。（文字描述有些長，大家可以借著上方的動圖來理解這個示例要做的事情）

兩層牌堆疊的初始布局

我們先來實現兩層牌的初始布局。其實我們可以先來看看如何創建一層，因為創建一層后，再創建一層就是兩層了。

如圖是第一層的 3x5 的網格布局，我們先計算出它的左上角的起點的位置。計算公式在圖中列出了，如果你之前有看過小螞蟻的教程，就應該知道，關于這個網格布局的計算我已經講過太多次了，所以這次我就不再講了，拿出你的紙和筆，畫一畫，寫一寫，這兩個計算公式就能很好理解了。

在計算出左上角的起點位置之后，我們就可以從這里開始，依次的去一行一行的創建每一張牌了。那如何設置每張牌的位置呢？

如圖，在知道一些已知條件之后，我們可以根據右邊的計算公式，計算得到網格布局中的每個位置上的張牌的坐標。

這樣第一層牌的計算公式就有了，接著看第二層牌。

如圖，綠色的網格表示第二層牌，第二層牌壓在第一層牌之上，而且它相對于第一層牌還有一個向上向右的偏移，從圖中可以很直觀的看出來，第二層左上角的起點位置，相對于第一層左上角的起點位置，向右上方偏移了半個格子，所以計算公式也很容易推出來，除了起點位置的計算不同，第二層牌的坐標位置的計算公式與第一層牌是一樣的。

到這里，創建兩層堆疊牌的理論基礎我們就搞定了，接下來到微信小游戲制作工具中實現一下。

來到微信小游戲制作工具中，首先我們準備兩個素材。

如圖，一個是“卡牌”的圖片，一個是“創建卡牌”的方塊，這個方塊不會在游戲中顯示，它只是用于放置創建卡牌的積木邏輯。

接著，我們再創建一些全局變量。

第一層起點位置X/Y：用于記錄第一層卡牌左上角起點的位置；

第二層起點位置X/Y：用于記錄第二層卡牌左上角起點的位置；

單元格的寬度/高度：用于設置每個卡牌所占用的格子的寬度和高度(這里我們把格子的大小設置為 100x120)；

當前創建的卡牌層級：用于區分當前創建的是第一層卡牌還是第二層卡牌；

行/列迭代：用于循環中的遍歷；

網格中點位置X/Y：用于設置整個網格布局的中心位置。

除了這些全局變量之外，我們還創建了兩個表格數據(這個在后續會用到)。

第一層表格：用于記錄第一層卡牌的狀態；

第二層表格：用于記錄第二層卡牌的狀態；

接著來看一下“創建卡牌”精靈上的積木邏輯。

根據之前推導出的計算公式，先計算出兩層網格的左上角起點的位置，接著使用雙重循環，一行一行的創建卡牌，這里注意了，我們使用“當前創建的卡牌層級”這個變量來區分創建的是哪一層的牌，另外每一層創建多少張牌，是根據這一層的表格來確定的（這個稍后會講），除此之外，在創建卡牌前我們還進行了一個判斷，只有表格中當前位置上的數據為 1 時，才創建卡牌，可以先猜一下為什么要這樣。

接著，再看一下卡牌上的積木邏輯。

卡牌被創建出來之后，根據不同的層級，來計算和設置自己的坐標位置（計算用的就是我們上方推導出的卡牌位置坐標的計算公式）。

你應該也發現了，在卡牌克隆邏輯剛開始的時候，我們設置了幾個變量，這幾個變量都是位于“卡牌”上的局部變量。

行/列號：記錄當前卡牌在整個網格布局中的行列號位置；

層級：記錄當前卡牌位于第幾層；

是否可抽取：用于判斷當前的卡牌是否可以點擊拾取（如果上方被其它卡牌壓住了就不能拾取）；

到這里，兩層牌堆疊的初始布局就制作好了，可以點擊預覽看一下。

因為我們在創建第二層牌之前等待了 0.5 秒，所以能夠明顯的看出兩層牌的創建順序。

檢測卡牌的狀態

完成初始布局之后，接著我們來實現第二個功能，每張牌都有兩個狀態，一個是可拾取狀態，一個是不可拾取狀態。我們使用不同的顏色來區分卡牌的狀態，紅色表示不可拾取，白色表示可拾取。

兩層共計 27 張牌，如何判斷哪張牌是可拾取的，哪張牌是不可拾取的呢？接下來我們就需要借助數據抽象了。

如圖，我們將兩個表格中填滿了數字 1，1 表示的就是這個位置上有牌，如果一個位置上的牌被取走了，我們就把該位置上的 1 設置為 0，表示這個位置上沒有牌了。

這里我們把這兩個表格平鋪開了，因為這樣方便查看，其實它們在游戲中更像是下面這樣。

看起來很混亂，所以后續講解的時候我們還是將它們平鋪開來，但是你要能夠自己腦補它們堆疊的樣子。

來看一下這張圖，左下角的藍色牌是第一層的牌，它目前是不可拾取狀態，如果它要變成拾取狀態的話，就需要拿走第二層左下角第一張紅色的牌，對不對？也就是說，第一層某個位置上的牌能不能拾取，要取決于第二層有沒有牌壓在它上面，如果有的話，那它就是不可拾取狀態，否則的話是可拾取狀態。

接著再來看一下另外兩種情況。

一種是有兩張牌壓著藍牌，一種是有四張牌壓著藍牌。

第一層牌到底能不能拾取，好像不但跟第二層牌有關，而且還跟它自己的位置有關，有的位置只有一張牌壓著它，有的位置有兩張壓著它，有的位置有四張牌壓著它.....看起來好像是沒有什么規律，但是作為一個游戲開發者，你一定要相信，它背后肯定是有規律的，而找到這個規律，就是解決這個問題的關鍵。

如圖，就是我找到的規律，假設當前需要判斷第一層牌中行列號為 (2,4) 的牌的狀態，那就需要判斷第二層 4 個位置上是否有牌，這四個位置分別為（2,4),(3,4),(2,3),(3,3)，第一層上的所有牌的狀態判斷都滿足這個規律。

對于邊角位置也依然滿足這個規律，因為有些位置超出了第二個表格邊界，超出表格邊界的位置其實就相當于沒有牌。

如果你的抽象能力不是很強的話，這部分讀起來會很困難，不過沒關系，我建議你利用現實中的道具來幫助自己理解。比如我在找這個規律的時候，就借助撲克牌來幫助自己理解這些抽象的數據表格。

好了，找到規律了，這個問題就解決一大半了。接下來，讓我們去小游戲制作工具中實現一下吧！

還記得我們之前創建的兩個表格數據嗎？它們中的內容如下：

要實現所有卡牌狀態的更新，我們需要借助通知，所以在數據區中創建一個“刷新卡牌”的通知。

接著來看一下“刷新卡牌”的積木邏輯。這段邏輯位于“卡牌”精靈上。

看上去挺長的，其實實現的就是我們上方找到的那個規律，分別判斷第二層表格中的四個位置，如果任何一個位置上有牌，那么第一層這個牌就不能抽取，否則的話，就能抽取。圖中你看到的那個很長的判斷積木，其實就是為了判斷這個位置是否超出了第二個表格的邊界，位于邊界之外的我們也當作無牌的情況。最后，如果當前牌是第二層的話，那全部設置為可抽取狀態，因為目前第二層就是最上層了。

最后，再來看一下卡牌點擊的積木邏輯。

如果當前牌不能抽取的話，我們就讓它抖動一下，如果能抽取的話，根據它的層級設置對應的表格中的數據為 0 （表格這個位置上沒有牌了），另外每當有牌被取走了，我們都應該刷新一下剩余牌的狀態，這里使用了對所有卡牌的通知，讓剩余的所有卡牌刷新自己的狀態，最后刪除掉抽取的這個卡牌。（這里暫時做簡單的刪除處理，在游戲中抽取的卡牌應該移動到下方的卡槽中，這個我們后續做到的時候再講）

這樣，一個堆疊牌的拾取功能就完成啦！什么？有點兒難吶？多看幾遍，盡量去理解，然后多動手做，難一點的事情做到后才會有滿滿的成就感，加油！

在這個示例中，我們使用的是 3x5，3x4 這樣滿滿當當的布局，如果不想要這樣滿當的布局該怎么做？正常游戲中每一關的布局可都是不一樣的呢！

很簡單，調整一個兩個表格中數據即可，有牌的地方放個 1 ，沒牌的地方放個 0。

再次預覽一下，就有新的關卡布局啦！

在這篇教程里，我們學到了兩層堆疊牌的實現，那三層呢？四層呢？五層呢？...... 原理都是一樣的，接下去就是你動手挑戰的機會啦！

歡迎關注小螞蟻的微信公眾號【小螞蟻教你做游戲】，學習更多游戲開發原創教程。