前陣子火爆的羊了個(gè)羊，你有玩過(guò)嗎？本文作者用Axure仿制了一個(gè)羊了個(gè)羊小游戲，它在交互方面非常接近，但通關(guān)難度比小程序版低一些。如何用Axure制作呢？一起來(lái)學(xué)習(xí)一下吧。

國(guó)慶假期沒(méi)出去玩，在家用Axure仿制了一個(gè)羊了個(gè)羊小游戲。對(duì)各位來(lái)說(shuō)，這東西的實(shí)用價(jià)值為0，可能有一些趣味性，感興趣的小伙伴可以點(diǎn)擊玩一下。交互盡可能地1：1復(fù)制，但通關(guān)難度比小程序版的低一些。

點(diǎn)擊玩一下：https://6qdurk.axshare.com/

制作過(guò)程也不復(fù)雜，主要是以下幾個(gè)需要實(shí)現(xiàn)的點(diǎn)：

一、小圖標(biāo)點(diǎn)擊消失，并同時(shí)移動(dòng)到下方的槽位

實(shí)現(xiàn)思路：

第一步：給每一個(gè)小圖標(biāo)編號(hào)，比如1代表小火苗圖標(biāo)，2代表玉米圖標(biāo)，以此類(lèi)推。

第二步：下方槽位大家應(yīng)該能猜到：是一個(gè)中繼器，中繼器的數(shù)據(jù)設(shè)置成class和sort兩列（這個(gè)后續(xù)會(huì)用到）。中繼器中的元素是一個(gè)擁有多種狀態(tài)的動(dòng)態(tài)面板，每個(gè)狀態(tài)對(duì)應(yīng)一個(gè)小圖標(biāo)。比如狀態(tài)1對(duì)應(yīng)的小火苗圖標(biāo)，狀態(tài)2對(duì)應(yīng)的玉米圖標(biāo)。然后根據(jù)class中的數(shù)據(jù)來(lái)顯示對(duì)應(yīng)狀態(tài)的小圖標(biāo)。

第三步：點(diǎn)擊小圖標(biāo)后，隱藏這個(gè)小圖標(biāo)，同時(shí)給中繼器增加一行，增加的這一行class數(shù)據(jù)就是點(diǎn)擊的這個(gè)小圖標(biāo)的編號(hào)。比如下圖點(diǎn)擊的胡蘿卜，胡蘿卜的class編號(hào)是11。

這樣就可以實(shí)現(xiàn)點(diǎn)擊上方的小圖標(biāo)后，小圖標(biāo)消失，并移動(dòng)到下方槽位的效果。

二、下方槽位累計(jì)三個(gè)相同圖標(biāo)后，會(huì)自動(dòng)消失

實(shí)現(xiàn)思路：

第一步：為每種圖標(biāo)新建一個(gè)對(duì)應(yīng)的文本框，每點(diǎn)擊一次小圖標(biāo)，文本框的文本就增加圖標(biāo)對(duì)應(yīng)的編號(hào)。比如玉米圖標(biāo)的編號(hào)是2，點(diǎn)擊一次玉米，玉米文本框的文本就增加2。點(diǎn)擊三次玉米圖標(biāo)，文本就是2+2+2=6。

第二步：當(dāng)玉米文本框的文本到達(dá)6后，就說(shuō)明下方槽位有3個(gè)玉米圖標(biāo)。

第三步：確定槽位有3個(gè)玉米后，刪除中繼器中的class=2的行，也就是三個(gè)玉米圖標(biāo)。

這樣就實(shí)現(xiàn)了有三個(gè)相同圖標(biāo)后自動(dòng)消失的效果。

三、下方槽位相同圖標(biāo)排序在一起，而不是穿插排序

玩家依次點(diǎn)擊玉米，火苗，玉米三個(gè)圖標(biāo)，槽位中需要的效果是：玉米-玉米-火苗，而不是玉米-火苗-玉米這樣的穿插效果。也就是說(shuō)要保證相同的圖標(biāo)排列在一起。這個(gè)就要用到中繼器的排序。也就是上文中sort數(shù)據(jù)的作用。

制作步驟：

第一步：為每種圖標(biāo)新建一個(gè)對(duì)應(yīng)的文本框用作排序，文本框數(shù)據(jù)默認(rèn)為0。

第二步：點(diǎn)擊某個(gè)圖標(biāo)后，設(shè)置對(duì)應(yīng)的文本框數(shù)據(jù)為所有圖標(biāo)的文本框之和。這樣就能保證后來(lái)點(diǎn)擊的圖標(biāo)排序值比前面的大。這樣后來(lái)點(diǎn)擊的就會(huì)排在后面。

第三步：點(diǎn)擊某個(gè)圖標(biāo)后，如果對(duì)應(yīng)的排序文本框的數(shù)據(jù)不等于0，說(shuō)明下方槽位已經(jīng)有了對(duì)應(yīng)的圖標(biāo)。增加行時(shí)將排序文本設(shè)置成sort值，這樣就能保證與已經(jīng)存在的圖標(biāo)sort值是一樣的。

這樣它們就排列在一起了（這一步邏輯有點(diǎn)繞，看不懂沒(méi)關(guān)系，不影響整體效果，可以繼續(xù)往下看）。

四、上層的圖標(biāo)會(huì)蓋住下層的圖標(biāo)，點(diǎn)擊上層的圖標(biāo)，下層被壓住的圖標(biāo)會(huì)點(diǎn)亮

制作思路：

這個(gè)需要梳理出來(lái)上下層的關(guān)系。以下圖為例，a11圖標(biāo)會(huì)被1塊上層圖標(biāo)壓住，a12被2塊壓住，a22被四塊圖標(biāo)壓住。對(duì)a11來(lái)說(shuō)，上層這一塊圖標(biāo)消失后，就可以被點(diǎn)亮。對(duì)a22來(lái)說(shuō)，上層的四塊圖標(biāo)都消失后，才可以被點(diǎn)亮。

我們給每一個(gè)下方圖標(biāo)設(shè)置一個(gè)對(duì)應(yīng)的文本框，文本框中對(duì)應(yīng)的是壓住自己的圖標(biāo)個(gè)數(shù)。上方的圖標(biāo)每消失一個(gè)，文本框數(shù)字就減少1，當(dāng)文本框?yàn)?時(shí)，就說(shuō)明上方圖標(biāo)都消失了，下方圖標(biāo)也就可以點(diǎn)亮了。

制作步驟：

第一步：給被壓住的圖標(biāo)增加一個(gè)半透明遮罩。

第二步：為被壓住的每一層圖標(biāo)新建一個(gè)對(duì)應(yīng)的文本框，文本框默認(rèn)數(shù)字為壓住自己的圖標(biāo)個(gè)數(shù)。比如a11是1，a22是4。

第三步：點(diǎn)擊上方圖標(biāo)，圖標(biāo)隱藏的同時(shí)，將被該圖標(biāo)壓住的下層圖標(biāo)對(duì)應(yīng)的文本框都減1。比如上圖中，綠色邊框的圖標(biāo)點(diǎn)擊后，會(huì)將a11、a12、a2

a22四個(gè)文本框的數(shù)字減1。

第四步：當(dāng)對(duì)應(yīng)的文本框數(shù)字為0時(shí)，隱藏半透明遮罩。

五、槽位到達(dá)7個(gè)后，游戲結(jié)束

實(shí)現(xiàn)思路：

中繼器行數(shù)到達(dá)7個(gè)之后，就代表槽位已滿(mǎn)，及代表游戲結(jié)束?？梢燥@示結(jié)束彈窗提示。

六、上方圖標(biāo)全部消失后，游戲通過(guò)成功

實(shí)現(xiàn)思路：

先確定上方有多少個(gè)圖標(biāo)，然后新建一個(gè)文本框，默認(rèn)數(shù)字為0。每點(diǎn)擊一個(gè)圖標(biāo)，文本框中的數(shù)字就加1，當(dāng)文本款的個(gè)數(shù)為圖標(biāo)個(gè)數(shù)時(shí)，說(shuō)明上方圖標(biāo)全部消失，即代表通過(guò)成功。

小結(jié)

實(shí)現(xiàn)這個(gè)游戲的功能，主要用到中繼器和文本框的“文本變化”屬性，了解一些中繼器功能的小伙伴理解起來(lái)會(huì)很容易。在小程序中被這個(gè)游戲“嫌棄”的小伙伴，可以來(lái)這個(gè)體驗(yàn)一下通關(guān)流程。希望可以為節(jié)后7天連續(xù)作戰(zhàn)的你帶來(lái)一點(diǎn)點(diǎn)小歡喜。