2023年Axure仿制的羊了個(gè)羊沒通關(guān)的可以來通關(guān)

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

點(diǎn)擊玩一下：https://6/

制作過程也不簡單，主要是以下幾個(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)，以此類推。

其次步：下方槽位大家應(yīng)當(dā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ù)來顯示對(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后，就說明下方槽位有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)，槽位中需要的效果是：玉米-玉米-火苗，而不是玉米-火苗-玉米這樣的穿插效果。也就是說要保證相同的圖標(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)的文本框之和。這樣就能保證后來點(diǎn)擊的圖標(biāo)排序值比前面的大。這樣后來點(diǎn)擊的就會(huì)排在后面。

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

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

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

制作思路：

這個(gè)需要梳理出來上下層的關(guān)系。以下圖為例，a11圖標(biāo)會(huì)被1塊上層圖標(biāo)壓住，a12被2塊壓住，a22被四塊圖標(biāo)壓住。對(duì)a11來說，上層這一塊圖標(biāo)消逝后，就可以被點(diǎn)亮。對(duì)a22來說，上層的四塊圖標(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í)，就說明上方圖標(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è)之后，就代表槽位已滿，及代表嬉戲結(jié)束?？梢燥@示結(jié)束彈窗提示。

六、上方圖標(biāo)全部消逝后，嬉戲通過勝利

實(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í)，說明上方圖標(biāo)全部消逝，即代表通過勝利。

小結(jié)

實(shí)現(xiàn)這個(gè)嬉戲的功能，主要用到中