Axure仿制的羊了個羊制作步驟詳細圖文解析圖文詳細教程
發布時間:2024-04-08 文章來源:深度系統下載 瀏覽:
| 用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天連續作戰的你帶來一點點小歡喜。
|
本文章關鍵詞： Axure仿制羊了個羊
相關文章
上一篇：
本類教程排行
系統熱門教程
本熱門系統總排行