Kitronik ARCADE游戏手柄实现连连看

连连看相信大家都玩过，但这个用Kitronik AR CADE游戏手柄来玩连连看的项目你相信是一个高一学生做的吗？没错，这位来自重庆一所中学的高一学生经过他哥哥的推荐来参加我们的Funpack10期活动，并且他和他哥哥一人设计了一个游戏，属于自己的小游戏。下面就来看看连连看这款小游戏如何设计的吧。

项目链接：https://www.eetree.cn/project/detail/474 ，代码已开源在电子森林。

实现功能

本次FunPack活动可大致分为两个任务

移植或者设计一款游戏

设计一款摩斯密码练习器

在确定参加这期活动之后一直在纠结是按键游戏还是设计摩斯密码练习器，如果按键游戏又在游戏主题上摇摆不定，摩斯密码练习器又感觉是一个很麻烦的任务。恰巧在网络上乱翻时看到了连连看的算法思路，就选定了在Kitronik ARCADE上实现一款连连看游戏。

实现思路及代码介绍

连连看是一种很受大家欢迎的小游戏。下面四张图给出了最基本的消除规则：

图 A 中出现在同一直线上无障碍的圈圈可以消除；图 B 中两个圈圈可以通过一次转弯消除；图 C 和图 D 中，两个圈圈可以通过两次转弯消除。

由于Kitronik ARCADE的屏幕一次只能完整显示10*7个图块，所以将地图设计为10*7大小。在游戏中使用数组的方式表示地图信息，使用不同的值表示不同的图块，0表示此位置为空，作为一个平面游戏，使用二维数组来保存地图信息最好理解，但由于makecode中函数接口只提供了一维数组。所以只能使用一维数组表示二维信息。创建一个大小为70的一维数组，对于数组中的数据，索引值index/10就是图块行Y的值，index%10即为图块列X的值。

图形显示以及选择实现

对于连连看这款游戏，大家多多少少都知道怎么玩，所以这里不介绍玩法。

一、地图创建以及显示

连连看游戏由不同的图块组成，上面介绍到地图信息确定为大小70的一维数组表示，且不同X、Y坐标位置的数值索引值都已经确定，则这里就会想到通过不同的值表示不同的图块，在游戏中一共使用了7个不同的图块，需要在设置图块地图时添加进入。

1、地图的创建

通过函数InitLevelOneImage，InitLeveTwoImage。。。初始化数组的方式初始化不同关卡地图信息。

2、地图的显示

遍历地图数组

通过索引位置确定图块位置信息

通过数组值将不同的图块放到确定的位置上

二、选择框的移动、消除、更新

1、选择框的创建

创建一个SelectBox对象用于表示选择框，将选择框与左上角第一个图块重叠（图块的大小为16*16，然后地图行列的间隔都是16，所以（8，8）为第一个图块位置）

2、选择框的移动

1）上

判断SelectBox对象是否在第一行（posY = 8），若在第一行则将图块移动到最后一行（第7行，posY = 104），若不在最上一行则直接往上移动一行（将posY减16）

2）下

与向上移动同理，判断SelectBox对象是否在最后一行（第七行，posY = 104），若在最后一行则将图块移动到第一行（posY = 8），若不在第七行则直接往下移动一行（将posY加16）

3）左

判断SelectBox对象是否在第一列（posX= 8），若在第一列则将图块移动到最右一列（第10列，posX = 152），若不在第一列则直接往左移动一列（将posX减16）

4）右

与左移同理，判断SelectBox对象是否在最后一列（第10列，posX= 152），若在最后一列则将图块移动到第一列（posX = 8），若不在最后一列则直接右移一列（将posX加16）

三、选定、取消、消除条件、消除完成判断、关卡更新

游戏中通过A按键选定图块，与选择框类似，只需要A按下时若当前位置不为空，且不为Choice精灵，则在当前选择框的位置创建Choice精灵即可，由于需要选择两个图块，所以A键按下时需要判断是否已经存在了一个Choice精灵（创建ChoiceBoxNums变量表示Choice精灵的数量），若存在则创建第二个Choice精灵，同时运行函数判断是否能被消除。

A按下（选定）

1）判断是否为空

2）若不为空且ChoiceBoxNums == 0时在当前位置创建ChoiceOne精灵，ChoiceBoxNums置1

3）若不为空且ChoiceBoxNums == 1且当前位置不为ChoiceOne位置，则创建ChoiceTwo精灵

消除条件

当ChoiceBoxNums == 2时，表示已经选定了两个图块，此时调用消除函数进行判断与消除。

消除完成判断及关卡更新

当地图数组全为0时表示消除完成，在每次进行判断消除之后进行一次判断是否消除完成，使用遍历数组然后相加的求和的方式得到和，若为0，则表示消除完。若消除完则根据关卡信息决定是进入下一关还是结束游戏。

地图初始化（关卡更新）

更新关卡只需要修改地图数组，然后更改一些特定的值即可完成新地图的载入，Levels表示当前关卡

消除算法

算法参考链接：https://blog.csdn.net/qq_41551359/article/details/82983513，并进行了简单的移植和更改。

设计函数isBlocked 表示x，y位置是否有图块（有无障碍），实现思路为查找数组Y*10+X索引处的值是否为0，若为0则表示此处为空，否则有障碍。

1、水平检测

水平检测用来判断两个点的纵坐标是否相等，同时判断两点间有没有障碍物。

定义函数horizon直接检测两点间是否有障碍物。

先判断A、B是否为同一个点

判断是否为水平关系

确定前后关系

使用循环遍历A、B中间的位格，若有一个为有图块则不能水平消除

2、垂直检测

垂直检测用来判断两个点的横坐标是否相等，同时判断两点间有没有障碍物。

与水平检测原理一致，定义函数vertical直接检测两点之间是否有障碍物

先判断A、B是否为同一个点

判断是否为垂直关系

确定上下关系

使用循环遍历A、B中间的位格，若有一个为有图块则不能水平消除

3、一个拐角检测

一个拐角检测可分解为水平检测和垂直检测，当两个同时满足时，便两点可通过一个拐角相连。即：

一个拐角检测 = 水平检测 && 垂直检测

A 点至 B 点能否连接可转化为满足任意一点：

A 点至 C 点的垂直检测，以及 C 点至 B 点的水平检测；

A 点至 D 点的水平检测，以及 D 点至 B 点的垂直检测。

定义函数 turn_once 用于一个拐角检测

判断A、B两点是否为同一点

判断C（X1，Y2）点是否为空

C、B水平检测&&A、C垂直检测，都满足则返回1

判断D（X2，Y1）是否为空

A、D水平检测&&B、D垂直检测，都满足则返回1

都不满足则返回0，表示不能一个拐点消除

4、两个拐角检测

两个拐角检测可分解为一个拐角检测和水平检测或垂直检测。即：

两个拐角检测 = 一个拐角检测 && （水平检测 || 垂直检测）

水平、垂直分别穿过 A B 共有四条直线，扫描直线上所有不包含 A B 的点，看是否存在一点 C ，满足以下任意一项：

A 点至 C 点通过水平或垂直检测，C 点至 B 点可通过一个拐角连接。（图中用 C 表示）

A 点至 C 点可通过一个拐角连接，C 点至 B 点通过水平或垂直连接。（图中用 C 下划线表示）

创建函数turn_twice用于两个拐角检测：

判断A、B两点是否为同一点

对地图数组进行遍历（temp_x 0-9，temp_y 0-6）

如果C点跟A、B两点都不为水平或者垂直关系，则跳过

若C点坐标为A或者B点，跳过

判断C点是否为空，若为空则跳过

A点与C点做一个拐角检测，C点与B点做水平检测或垂直检测，A、B两点关系都满足则返回1表示C点条件满足

B点与C点做一个拐角检测，C点与A点做水平检测或垂直检测，A、B两点关系都满足则返回1表示C点条件满足

否则返回0

5、算法整合

目前为止，连连看的基本算法都已经实现，整合创建一个remove函数判断相同图块的两点是否能通过以上四种算法消除。

判断两个点是否为同一图块

判断是否能水平消除，若能则将两个位置的数组内容置为0，表示空。

否则判断是否能垂直消除，若能则将两个位置的数组的内容置0

否则判断是否能一个拐点消除，若能则将两个位置的数组值置为0

否则判断两点能否两个拐点消除，若能则将两个位置的数组值置为0

不管是否消除两个图块，销毁两个选择框精灵，将选择框数量变量值置为0

演示说明

游戏开始，游戏地图初始化，开始倒计时。

按下A键选中方块，红框表示方框已选中，然后找到一个与此方块相同的方块，再次选中即可消除。

成功消除第一关全部方块后，自动开始下一关。

在规定时间内消除所有方块即可获胜

如果没有按时消除所有方块就会失败

心得体会

这是我第一次参加Funpack活动，这次活动使我感触很深，青少年可以低成本地通过Funpack的活动认识到游戏编译的乐趣，很有教育意义。

编辑：jq