连线消除游戏的原理和实现

简介: 继三消和点消之后,我们来继续了解下一种连线消除游戏的原理和实现。连线消除和之前的两种有着很大的不同,因为它不需要自动的查找算法,连线的整个过程都是由玩家自主手动完成的。

嗨!大家好,我是小蚂蚁。

继三消和点消之后,我们来继续了解下一种连线消除游戏的原理和实现。连线消除和之前的两种有着很大的不同,因为它不需要自动的查找算法,连线的整个过程都是由玩家自主手动完成的。

如图,连线消除游戏的规则是这样的:从玩家按住第一个图标开始,可以沿着水平,竖直,斜方向划线,如果划到的另一个图标跟之前的图标是一样的,就连起来,可以一直连直到再没有相同的图标为止。此时玩家松手,如果连成线的图标数量大于等于三个,则这些图标就能够被消除。

在连线消除游戏中,重点有两个,一个是判断下一个划到的图标跟之前的图标是否相同,是否应纳入匹配队列,另一个是如何将这些相同的图标用线连起来。

先理论

老规矩,我们还是先看理论部分,先来解决第一个问题,如何判断下一个划到的图标跟之前的图标是否相同。

如图,中间的 6 个绿色的三角形图标是相同的,可以用一条线把它连起来。但是我们怎么才能让计算机知道它们 6 个是一样的呢?如果之前有好好学习的话,那你应该立即反应过来,数据抽象呀!

如图,每个图标都对应一个数字,我们就可以把当前的整个游戏抽象成一个包含数字的表格,判断两个图标是否一样,其实就变成了判断两个数字是否相等。

至于如何能知道玩家当前按住了哪个图标呢?网格布局呀!至于如何知道玩家手指当前划到了哪个图标呢?还是网格布局呀!不清楚的话赶紧去【这里】补补课。

再来解决第二个问题,如何将相同的图标用一条线连接起来。

把所有相同的图标连成一条长线,其实就是在每两个相邻的图标之间连一条短线,如图,一共是 6 个相同的图标,那么共需要 5 条短线来把它们全部连接起来。

在玩家操作的过程中,我们可以将相同图标的位置存储到一个匹配列表中,连线的时候,只需要从匹配列表中依次的取出两个相邻图标的位置,然后在这两个位置之间创建一条直线即可。

至于如何消除,消除后上方的图标如何下落,系列课里之前都有讲过,不会的同学可以去前面补课,这里就不再重复讲了。

以上就是理论部分了,相比三消和点消,连线消除真的简单很多。

再实践

接下来,我们就来看一下连线消除游戏在微信小游戏制作工具中的实现吧!

首先,来看一下对于玩家操作处理的积木逻辑。

玩家手指按下:

玩家手指滑动:

玩家手指抬起:

其中有一个地方可能有的同学不太理解,就是为什么要把行列号换算成索引,有的时候又要把索引换算成行列号呢?因为换算成索引可以让我们只需要使用一个列表就可以存储一个图标位置。我们都知道行列号是一个图标的唯一标识,如果我们存储行列号的话,一个行号一个列号就得使用表格的形式,或者使用两个列表。现在我们把它换算成索引,只需要使用一个列表就够了。之前的课程中我们讲过,行列号和索引是等价的,是可以互推的,所以为了存储方便,我们就转换成索引,为了计算方便,我们就转换成行列号。

接着再来看一下图标上的匹配判断。

匹配判断很简单,整个过程是这样的:每当玩家的手指滑动到一个相邻的图标上时,就给所有的图标发送一次匹配通知,每个图标都会判断当前是否划到了自己身上,并且判断自己是否跟之前连接的图标类型相同,当同时满足这两个条件时,就把这个图标加入到匹配列表中。

以上的这些是如何找到相同的图标,并且把它们的索引记录到一个匹配元素列表中。有了这个列表,就相当于我们有了每个图标的行列位置,接下来就是依次的取出两个图标,然后用一条线将它们连接起来了。

如图,是连接线的积木逻辑,注释已经写的很清楚了。这里我们重点来看一下其中的获取两个点位置的函数,这个函数的作用是利用两个图标的索引,计算出这两个图标在屏幕上的坐标位置(x,y)。

这个函数的积木逻辑主要进行计算处理,先利用图标的索引计算出图标的行号和列号,然后再根据行列号计算出图标在屏幕上的位置坐标 (x,y),并存储在返回列表中,这里我们利用了一个局部的列表变量来存储函数计算的值,用于在后续创建连线的时候使用。

最后,我们再来看一下如何根据两个点的坐标位置,设置一条连接线。

都是一些简单的数学计算,这里就不再赘述了。之前专门写过一篇游戏开发中的数学的教程,数学知识忘光了的同学可以去【这里】学习。

连线消除的教程到此就结束了,至此,我已经写完了三消,点消,连线消的所有教程,这个坑总算是填完了,终于可以长长的舒一口气了。

消除游戏至今仍然是一个很大的品类,受众很广泛,对于个人游戏开发者来讲依然是个不错的选择。希望这些系列教程能够帮助你了解各种各样的消除游戏,如果觉得教程不错,不要忘了点赞转发,也算是对我辛勤创作的一点儿鼓励了,哈哈!

另外文章开头的连线消水果是我制作的一个游戏模版,如果你想要获取模版结合着教程一块学习,或者基于模版继续开发,可以点击下方链接购买,无需在意商品详情,购买后留言备注“连线消水果”即可。我是会做游戏也会教你做游戏的小蚂蚁,想学习做游戏的话,关注我的公众号就对啦!


自己学习没氛围学不下去?遇到问题无人解答?缺少经验不知该如何前行?......欢迎加入小蚂蚁的游戏开发课,不只是一门课,而是围绕着学习做游戏有关的一整套服务。致力于帮助更多的人学会做游戏并做出自己的游戏,欢迎来跟一百多位同学一起学习做游戏。【点击这里】了解课程服务详情。


点击下方链接,可前往小商店购买课程服务。


这里是小蚂蚁的小游戏系列,闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装,点击下方的游戏卡片就可以直接玩啦!










也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识和内容,可以来围观。备注“学习做游戏”可免费领取学习做游戏的原创教程资料。接受付费咨询,不闲聊,望见谅。

相关文章
|
2月前
|
算法
leetcode-390:消除游戏
leetcode-390:消除游戏
27 0
|
11月前
|
人工智能 算法 BI
LeetCode-390 消除游戏
LeetCode-390 消除游戏
|
2月前
|
索引
消除游戏中图标下落的原理和实现
消除游戏中图标下落的原理和实现
21 1
|
2月前
|
存储 算法 Serverless
连线消除游戏的原理和实现
连线消除游戏的原理和实现
55 0
|
2月前
|
开发者
所有消除游戏背后都有一张看不见的网格
所有消除游戏背后都有一张看不见的网格
40 0
|
2月前
实现横版游戏中角色的跳跃控制是如何实现的?
实现横版游戏中角色的跳跃控制是如何实现的?
30 0
|
10月前
行走小动画案例扩展
行走小动画案例扩展
|
小程序 搜索推荐
计划写一个消除游戏系列
我决定为自己开一个“大坑”,就是写一个消除游戏的系列。在这个系列中将会包含各种各样的消除游戏的实现原理和方法,目前在计划之中的有连线消除,点消和三消。
67 0
|
索引
消除游戏中宝石下落的原理和实现
在消除游戏中,发生消除之后,会留下空白位置。此时,如果上方有其它的宝石,那这些宝石就会下落填充空白位置。今天我们就来了解一下宝石下落的方法以及实现。
138 0
如何做一个俄罗斯方块3:形状控制
今天,我们来继续学习和实现下一个模块:玩家控制形状。在俄罗斯方块游戏中,玩家可以对下落的形状进行控制,控制分为两种,一种是控制形状的移动(左,右,下),一种是控制形状的旋转(顺时针旋转 90 度)。
112 0