如何制作一个【羊了个羊】游戏4:道具的实现

大头不大嘴

嗨！大家好，我是小蚂蚁。
今天是羊了个羊系列教程的最后一节，我们来学习一下游戏中的三种道具的实现。
这三种道具分别是：移出三张牌，撤回一步，随机打乱顺序。
接下来，我们就依次来看一下每种道具的具体实现。
移出三张卡牌

这个道具的作用是从当前的卡牌槽中移出前三张牌，把它们暂时放在卡牌槽的上方，移出的牌可以在后续再次加入到卡牌槽中。
使用移出道具时，有可能会出现两种情况。一种是当前卡牌槽中的卡牌数量小于等于 3 张，一种是当前卡牌槽中的卡牌数量大于 3 张。




上方图示的就是这两种情况，第二种情况（牌数多余于3 张）需要多处理一步，将剩余牌的位置向前调整。
接着，我们直接来看一下具体的实现吧！
首先，新增的两个新的全局变量。

移出卡牌的数量：记录的是当前需要移出几张卡牌，如果卡槽中只有两张牌，那么移出卡牌的数量就是 2，如果卡槽中超过三张牌，那么数量就是 3。
移出卡牌的位置：记录当前移出的卡牌的位置，因为最多只有三张移出卡牌，所以这个位置记录的是1，2 或者 3。

新增两个通知。

移出卡牌位置调整：移出卡牌后，通知剩余的卡牌进行位置调整。
移出插槽卡牌：通知插槽中的卡牌进行移出处理。

接着看一下，在场景中我们增加了两个新的资源。


一个是移出道具的按钮（这里我使用了容器来制作按钮），另一个是“移出卡牌”，这里我们单独创建了一个新的“移出卡牌”精灵，它专门负责处理移出卡牌的功能和逻辑。

‍还记得之前讲过的职责分离吗？我们创建了“卡牌”和“插槽卡牌”，“卡牌”负责在堆叠布局中展示和拾取，“插槽卡牌”负责处理拾取后卡牌的放置，消除，位置调整等等，它们各自只需要负责处理自己的事情，这里我们创建一个新的“移出卡牌”也是同样的道理，它只需要负责处理移出卡牌的逻辑即可。

来看一下具体的实现逻辑，首先是“移出道具按钮”上的积木逻辑。


接着来看一下“移出卡牌”上的积木逻辑。


“移出卡牌”上需要处理的逻辑只有两部分，一部分是被创建出来之后，先把自己放在卡牌槽中的对应牌的位置上，然后再使用一个动画积木让自己移动到卡牌槽上方的指定位置上。
“移出卡牌”的拾取逻辑与“卡牌”的拾取逻辑类似，创建一个新的“插槽卡牌”，然后把自己删除掉。
最后，再来看一下插槽卡牌中的新增的两个通知处理。


预览一下，看看移出道具的效果。






当卡牌槽中牌的数量不足三张的时候，直接将所有的牌移出放置到上方，当超过三张的时候，移出前三张，然后调整剩余牌的位置。移出的牌在需要的时候可以再次选择加入到卡牌槽中。
撤回一步

这个道具跟我们电脑上常用回退操作(Ctrl Z )有点儿像，其实就是将上一步拾取到卡槽中的牌退回到它之前在上方堆叠布局中的位置。这个撤回道具只能回退一步，不能够进行多次的回退。
这个好像没有什么理论可讲的，我们就直接来看它的具体实现吧！
首先，还是新增一些变量。

撤回卡牌：用于判断当前创建的卡牌是否是需要撤回的卡牌；
撤回卡牌行/列号：记录上一步拾取的卡牌的行列号；
撤回卡牌层级：记录上一步拾取的卡牌的层级；
撤回卡牌类型：记录上一步拾取的卡牌的类型；
撤回卡牌插槽位置：记录上一步加入到卡槽中的牌在卡槽中的位置；

这一系列撤回变量的作用其实就是记录上一步操作的那张牌的各种信息，因为只能回退一步，所以我们只需要记录上一张牌的信息即可。有了这些信息，就能够创建出上一张牌了。
新建两个新的通知。

撤回卡牌：用于向卡槽中的所有的牌发送通知，让上一步插入进来的牌撤回。
撤回卡牌位置调整：撤回之后，卡槽中剩余的牌需要进行位置的调整。

在场景中新增一个“撤回一步按钮”。


来看一下“撤回一步按钮”上的积木逻辑。


逻辑看上去很的简单，不过有个地方需要注意一下，在一张卡牌被撤回之后，需要刷新一次所有卡牌的状态，因为有可能出现这种情况，例如拾取了一张第二层的牌，这个牌被拾取后，它下方第一层的牌变成了可拾取状态，此时如果使用了撤回操作，那这张牌会回到原来的位置上，那它下方的那张牌就应该再次变成不可拾取状态，所以在撤回操作之后，我们需要重新计算所有牌的状态。
这里通过“撤回卡牌插槽位置”这个变量是否大于 0 ，来判断当前是否有需要撤回的牌。什么情况下没有要撤回的牌呢？一种是已经撤回了一次了，就不能再撤回了，另一种是拾取的牌产生消除了，此时也没有要撤回的牌了（因为已经消除掉了）。
接着，来看“插槽卡牌”上新增的两个通知处理。


再来看一下“卡牌”上的一些积木逻辑的修改。
“卡牌”被克隆出来时的积木逻辑修改：




这里主要根据当前创建的是否是要撤回的卡牌来使用不同的逻辑，关卡初始时创建的卡牌依旧使用原来的逻辑，对于要撤回的卡牌，使用撤回变量中的数据进行设置。
“卡牌”点击时的积木逻辑修改：


红线框出的为增加的积木逻辑，即每次从上方拾取卡牌的时候，就记录这张卡牌的信息，所以这些撤回变量里记录的永远都是上一张卡牌的信息。
最后，在“插槽卡牌”的克隆逻辑中也需要做一点儿修改。


只增加了一个积木块，用于记录要撤回的卡牌在插槽中的位置。
预览一下，看看撤回道具的效果。




总是会撤回最后一次拾取的牌，并且在撤回之后，所有的牌的拾取状态会自动更新。
随机打乱顺序

这个道具的作用是将当前的所有卡牌的顺序随机的进行打乱，在没有可消除的牌时，进行随机打乱后或许就会出现转机。
这个功能如何实现呢？来看一下下方的这张图：


注意图中的数字代表的是牌的位置编号，而不是牌的类型，这里我们将牌的位置（行号，列号，层级）抽象成一个数字，方便理解整个随机打乱的过程。
在随机打乱之前，卡牌按照顺序排列，将所有卡牌的位置编号添加到一个列表中，将这个列表进行随机的打乱，就能够得到一个乱序的列表，然后从第一项开始，将新列表的位置依次的设置到卡牌的位置中，得到的就是下方的随机打乱后的卡牌位置，最后再将这些卡牌按照设置的位置重新进行排列。
最后的调整过程看起来应该是这样的。


最后在重新调整后的卡牌中，第 1 张卡牌其实是原来位于位置 5 上的卡牌。
以上就是随机打乱的实现思路了，就是将所有卡牌的位置进行随机的互换，让我们到微信小游戏制作工具中实现一下吧！
增加一个新的全局变量。

当前随机打乱层级：记录当前要进行位置调整的是哪一层的卡牌。

增加四个新的列表。

卡牌行/列号列表：记录所有卡牌的行号和列号；
卡牌层级列表：记录所有卡牌的层级，即位于第几层；
随机乱序列表：用于生成随机打乱顺序的列表；

上方我们讲过的使用一个数字表示卡牌位置，是对位置进行了简化处理，方便理解。实际游戏中，每张卡牌的位置由行号，列号，层级三部分组成，所以这里需要三个列表来分别记录位置信息。
新增三个通知。

记录卡牌位置：通知所有的卡牌将自己的位置信息记录到列表中；
随机设置卡牌位置：通知所有卡牌将打乱顺序后的位置依次设置到卡牌的位置信息中；
随机打乱卡牌：通知所有卡牌调整自己的位置到之前设置的位置上；

接着，在场景中，新增一个“随机打乱按钮”。


来看一下“随机打乱按钮”上的积木逻辑。


这里注意“随机乱序列表”的使用，我们使用了三个列表来记录卡牌的位置信息，这三个列表是不能随机打乱顺序的，因为行号列表中的第 n 项，列号列表中的第 n 项，层级列表中的第 n 项，这三个数值决定了一张卡牌的位置，这三个列表中的项必须是一一对应的。所以这里我们使用了第四个列表，即“随机乱序列表”，这个列表中存放就是卡牌的位置编号，每个位置编号只需要一个数字即可（这个跟我们前面讲过的对上了），假如当前共有 5 张卡牌，那我们就生成一个 [1,2,3,4,5] 的列表，将这个列表随机打乱顺序 [3,5,2,1,4]，然后将新的位置依次的设置到卡牌中。

如何通过一个数字位置编号，获取到包含三个信息的卡牌位置呢？假如说当前卡牌的位置编号为 1 ，那么就可以通过“卡牌行号列表的第 1 项”得到行号，“卡牌列号列表的第 1 项”得到列号，“卡牌层级列表的第 1 项”得到层级。

另外一点儿需要注意的是在最后调整卡牌位置的时候，我们是一层一层调整的，即先调整第一层的卡牌，然后再调整第二层的卡牌。为什么这么做呢？因为卡牌图片是有层级顺序的，要确保第二层卡牌图片的层级位于第一层卡牌之上，这样才能让第二层卡牌显示在第一层卡牌的上面。所以这里我们先从下层调整，然后再调整上面的一层，这样就能保证卡牌图片层级的正确显示了。
接着，再来看一下“卡牌”上新增的三个通知的处理。
记录卡牌位置通知的处理：


随机设置卡牌位置通知的处理：


随机打乱卡牌通知的处理：


注意这里使用了“将自己的层级移至最上层”积木，这个积木块的作用是将当前精灵的图层移动到最上方，前面讲过我们是一层一层的进行调整的，调整第一层时，第一层卡牌图片的层级位于最上层，接着调整第二层，此时，第二层卡牌图片的层级位于最上层了（第一层卡牌之上），然后以此类推，即使你有 n 层卡牌，这些卡牌图片的显示顺序也会是一层一层的正确显示的。
最后，我们来预览一下这个随机打乱道具的效果。


至此，羊了个羊游戏系列教程就结束了。对不少人讲，学习这个系列教程有些困难。但是如果你能硬着头皮坚持下来，再回过头来看看，一定会发现自己收获了很多。
在这四节教程中，我们把羊了个羊这种三消游戏包含的所有内容基本上都讲全了，也就是说你现在已经掌握了足够的技巧和方法了，对于这样的一个消除游戏，接下来怎么做，是增加更多的层数，还是增加更多的关卡，亦或者融合进一些你自己的想法......你已经具备了足够的能力来做这些事情，所以到底要怎样做，就要看你了。
“师傅领进门，修行在个人 ”这句俗语还是很有道理的，你要做的游戏，或者要做的事不可能永远有教程，或者有人能引领，大部分时候，我们终归还是要一个人摸索着前行的。
最后羊了个羊游戏模版已经上线，可以识别下方的小程序码体验。



<hr/>
我是会做游戏也会教你做游戏的小蚂蚁，想学习做游戏的话，关注我的微信公众号【小蚂蚁教你做游戏】就对啦！
这里是小蚂蚁的小游戏系列，闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装，微信扫码就可以直接玩啦！