Axure仿制的羊了個羊，沒通關的可以來通關
前陣子火爆的羊了個羊，你有玩過嗎？本文作者用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協議
最新文章
-
“豫西中醫界之泰鬥喬保均”治療疑難病60年經驗賞析
11小時前 -
回憶、健忘和灑脫
11小時前 -
弘一法師：“真的不忍心告訴你，這個世界隻是一個夢。你一輩子執
12小時前 -
心理學，準的讓你驚叫
12小時前 -
人生，成大器者有四識，知識、見識、膽識、遠識
12小時前 -
俞和：被遺忘的書法家，以古為師，創新在手！
12小時前 -
2024屆新高考II卷語文真題答案及解析
13小時前 -
生前隻是小人物，死後震驚史學界
13小時前
熱門文章
-
每日一誦傷寒論第241條
1周前 -
老張老李侃門球之140篇
2天前 -
診餘雜記（師傳經驗）
4天前 -
為什麼五點鐘要起床答案讓人吃驚！（現在知道還不晚）
1周前 -
這個穴位可以治療多種胃痛腹痛，還可以減肥
5天前 -
治療坐骨神經痛藥酒５方
1周前 -
美麗中國-2870：中國最大的内陸河，塔裡木河
2天前 -
二十四山開門放水作竈真訣開門放水作竈直訣——子山
2天前
有話要說...