前陣子火爆的羊了個羊，你有玩過嗎？本文作者用Axure仿制了一個羊了個羊小遊戲，它在互動方面非常接近，但通關難度比小程式版低一些。如何用Axure制作呢？一起來學習一下吧。
國慶假期沒出去玩，在家用Axure仿制了一個羊了個羊小遊戲。對各位來說，這東西的實用價值為0，可能有一些趣味性，感興趣的小夥伴可以點選玩一下。互動盡可能地1：1複制，但通關難度比小程式版的低一些。
制作過程也不複雜，主要是以下幾個需要實作的點：
一、小圖示點選消失，并同時移動到下方的槽位
實作思路：
第一步：給每一個小圖示編号，比如1代表小火苗圖示，2代表玉米圖示，以此類推。
第二步：下方槽位大家應該能猜到：是一個中繼器，中繼器的資料設定成class和sort兩列（這個後續會用到）。中繼器中的元素是一個擁有多種狀态的動态面闆，每個狀态對應一個小圖示。比如狀态1對應的小火苗圖示，狀态2對應的玉米圖示。然後根據class中的資料來顯示對應狀态的小圖示。
第三步：點選小圖示後，隐藏這個小圖示，同時給中繼器增加一行，增加的這一行class資料就是點選的這個小圖示的編号。比如下圖點選的胡蘿蔔，胡蘿蔔的class編号是11。
這樣就可以實作點選上方的小圖示後，小圖示消失，并移動到下方槽位的效果。
二、下方槽位累計三個相同圖示後，會自動消失
實作思路：
第一步：為每種圖示建立一個對應的文本框，每點選一次小圖示，文本框的文本就增加圖示對應的編号。比如玉米圖示的編号是2，點選一次玉米，玉米文本框的文本就增加2。點選三次玉米圖示，文本就是2+2+2=6。
第二步：當玉米文本框的文本到達6後，就說明下方槽位有3個玉米圖示。
第三步：确定槽位有3個玉米後，删除中繼器中的class=2的行，也就是三個玉米圖示。
這樣就實作了有三個相同圖示後自動消失的效果。
三、下方槽位相同圖示排序在一起，而不是穿插排序
玩家依次點選玉米，火苗，玉米三個圖示，槽位中需要的效果是：玉米-玉米-火苗，而不是玉米-火苗-玉米這樣的穿插效果。也就是說要保證相同的圖示排列在一起。這個就要用到中繼器的排序。也就是上文中sort資料的作用。
制作步驟：
第一步：為每種圖示建立一個對應的文本框用作排序，文本框資料預設為0。
第二步：點選某個圖示後，設定對應的文本框資料為所有圖示的文本框之和。這樣就能保證後來點選的圖示排序值比前面的大。這樣後來點選的就會排在後面。
第三步：點選某個圖示後，如果對應的排序文本框的資料不等于0，說明下方槽位已經有了對應的圖示。增加行時将排序文本設定成sort值，這樣就能保證與已經存在的圖示sort值是一樣的。
這樣它們就排列在一起了（這一步邏輯有點繞，看不懂沒關系，不影響整體效果，可以繼續往下看）。
四、上層的圖示會蓋住下層的圖示，點選上層的圖示，下層被壓住的圖示會點亮
制作思路：
這個需要梳理出來上下層的關系。以下圖為例，a11圖示會被1塊上層圖示壓住，a12被2塊壓住，a22被四塊圖示壓住。對a11來說，上層這一塊圖示消失後，就可以被點亮。對a22來說，上層的四塊圖示都消失後，才可以被點亮。
我們給每一個下方圖示設定一個對應的文本框，文本框中對應的是壓住自己的圖示個數。上方的圖示每消失一個，文本框數字就減少1，當文本框為0時，就說明上方圖示都消失了，下方圖示也就可以點亮了。
制作步驟：
第一步：給被壓住的圖示增加一個半透明遮罩。
第二步：為被壓住的每一層圖示建立一個對應的文本框，文本框預設數字為壓住自己的圖示個數。比如a11是1，a22是4。
第三步：點選上方圖示，圖示隐藏的同時，将被該圖示壓住的下層圖示對應的文本框都減1。比如上圖中，綠色邊框的圖示點選後，會将a11、a12、a2
a22四個文本框的數字減1。
第四步：當對應的文本框數字為0時，隐藏半透明遮罩。
五、槽位到達7個後，遊戲結束
實作思路：
中繼器行數到達7個之後，就代表槽位已滿，及代表遊戲結束。可以顯示結束彈窗提示。
六、上方圖示全部消失後，遊戲通過成功
實作思路：
先确定上方有多少個圖示，然後建立一個文本框，預設數字為0。每點選一個圖示，文本框中的數字就加1，當文本款的個數為圖示個數時，說明上方圖示全部消失，即代表通過成功。
小結
實作這個遊戲的功能，主要用到中繼器和文本框的“文本變化”屬性，了解一些中繼器功能的小夥伴了解起來會很容易。在小程式中被這個遊戲“嫌棄”的小夥伴，可以來這個體驗一下通關流程。希望可以為節後7天連續作戰的你帶來一點點小歡喜。
專欄作家
原木森林，人人都是産品經理專欄作家。專注于使用者增長相關的邏輯、方法和案例分享。
本文原創釋出于人人都是産品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。