前阵子火爆的羊了个羊，你有玩过吗？本文作者用Axure仿制了一个羊了个羊小游戏，它在交互方面非常接近，但通关难度比小程序版低一些。如何用Axure制作呢？一起来学习一下吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

国庆假期没出去玩，在家用Axure仿制了一个羊了个羊小游戏。对各位来说，这东西的实用价值为0，可能有一些趣味性，感兴趣的小伙伴可以点击玩一下。交互尽可能地1：1复制，但通关难度比小程序版的低一些。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

制作过程也不复杂，主要是以下几个需要实现的点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

一、小图标点击消失，并同时移动到下方的槽位

实现思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第一步：给每一个小图标编号，比如1代表小火苗图标，2代表玉米图标，以此类推。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第二步：下方槽位大家应该能猜到：是一个中继器，中继器的数据设置成class和sort两列（这个后续会用到）。中继器中的元素是一个拥有多种状态的动态面板，每个状态对应一个小图标。比如状态1对应的小火苗图标，状态2对应的玉米图标。然后根据class中的数据来显示对应状态的小图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第三步：点击小图标后，隐藏这个小图标，同时给中继器增加一行，增加的这一行class数据就是点击的这个小图标的编号。比如下图点击的胡萝卜，胡萝卜的class编号是11。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

这样就可以实现点击上方的小图标后，小图标消失，并移动到下方槽位的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

二、下方槽位累计三个相同图标后，会自动消失

实现思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第一步：为每种图标新建一个对应的文本框，每点击一次小图标，文本框的文本就增加图标对应的编号。比如玉米图标的编号是2，点击一次玉米，玉米文本框的文本就增加2。点击三次玉米图标，文本就是2+2+2=6。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第二步：当玉米文本框的文本到达6后，就说明下方槽位有3个玉米图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第三步：确定槽位有3个玉米后，删除中继器中的class=2的行，也就是三个玉米图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

这样就实现了有三个相同图标后自动消失的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

三、下方槽位相同图标排序在一起，而不是穿插排序

玩家依次点击玉米，火苗，玉米三个图标，槽位中需要的效果是：玉米-玉米-火苗，而不是玉米-火苗-玉米这样的穿插效果。也就是说要保证相同的图标排列在一起。这个就要用到中继器的排序。也就是上文中sort数据的作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

制作步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第一步：为每种图标新建一个对应的文本框用作排序，文本框数据默认为0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第二步：点击某个图标后，设置对应的文本框数据为所有图标的文本框之和。这样就能保证后来点击的图标排序值比前面的大。这样后来点击的就会排在后面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第三步：点击某个图标后，如果对应的排序文本框的数据不等于0，说明下方槽位已经有了对应的图标。增加行时将排序文本设置成sort值，这样就能保证与已经存在的图标sort值是一样的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

这样它们就排列在一起了（这一步逻辑有点绕，看不懂没关系，不影响整体效果，可以继续往下看）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

四、上层的图标会盖住下层的图标，点击上层的图标，下层被压住的图标会点亮

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

制作思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

这个需要梳理出来上下层的关系。以下图为例，a11图标会被1块上层图标压住，a12被2块压住，a22被四块图标压住。对a11来说，上层这一块图标消失后，就可以被点亮。对a22来说，上层的四块图标都消失后，才可以被点亮。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

我们给每一个下方图标设置一个对应的文本框，文本框中对应的是压住自己的图标个数。上方的图标每消失一个，文本框数字就减少1，当文本框为0时，就说明上方图标都消失了，下方图标也就可以点亮了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

制作步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第一步：给被压住的图标增加一个半透明遮罩。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第二步：为被压住的每一层图标新建一个对应的文本框，文本框默认数字为压住自己的图标个数。比如a11是1，a22是4。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第三步：点击上方图标，图标隐藏的同时，将被该图标压住的下层图标对应的文本框都减1。比如上图中，绿色边框的图标点击后，会将a11、a12、a2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

a22四个文本框的数字减1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

第四步：当对应的文本框数字为0时，隐藏半透明遮罩。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

五、槽位到达7个后，游戏结束

实现思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

中继器行数到达7个之后，就代表槽位已满，及代表游戏结束。可以显示结束弹窗提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

六、上方图标全部消失后，游戏通过成功

实现思路：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

先确定上方有多少个图标，然后新建一个文本框，默认数字为0。每点击一个图标，文本框中的数字就加1，当文本款的个数为图标个数时，说明上方图标全部消失，即代表通过成功。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

小结

实现这个游戏的功能，主要用到中继器和文本框的“文本变化”属性，了解一些中继器功能的小伙伴理解起来会很容易。在小程序中被这个游戏“嫌弃”的小伙伴，可以来这个体验一下通关流程。希望可以为节后7天连续作战的你带来一点点小欢喜。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

专栏作家文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

原木森林，人人都是产品经理专栏作家。专注于用户增长相关的逻辑、方法和案例分享。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

本文原创发布于人人都是产品经理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

题图来自Unsplash，基于CC0协议文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29758.html