连连看

连连看游戏规则：只要将相同的两张牌用三根以内的直线连在一起就可以消除，

地图绘制

绘制一个网格。

暂定为 m * n

为了游戏体验，一般 m = n，且都是大于 5，小于 20 的。

地图的大小，决定了游戏的难以程度。

地图的最外围其实还是有一圈的，可以绘制处理，不进行图片初始化。或者干脆隐藏掉。

图片初始化

说明

地图绘制完成，就可以向里面插入对应的图片元素。

图片的个数

图片都会成对的，所以相同的图片只需要一个即可。

图片的个数和游戏难度成正比。

一般应该也是 [5,20] 之间，让游戏具有可玩性。

随机性问题

如果是从左到右，从上到下，2 2 放置，那么是最简单的。

游戏的难度和随机性成正比。

随机的实现方式

放置-打乱

首先按照顺序，全部放置好。

然后通过平移，旋转，调换，让棋盘变得随机。

随机放置

比如一个 10*10 的棋盘，从左到右，从上到下，实际上对应是 100 个下标。

我们可以首先用指定个数的图片，填充一个数组。

接下来随机依然有2种方式，不过本质是一样的。

（1）打乱数组本身，然后顺序放到棋盘

（2）数组不变，随机在棋盘的空余位置选择一个位置。

总的来看，方案（1）是最简单的。

ps: 这里需要考虑一下难度问题，如果控制这个随机的程度呢?

死锁问题

随机，是一种理论上的实现方式。

可是连连看本身有一定的限制，最后如果出现了

A B
B A

这种，可能导致无法消除的问题，也会导致游戏无法进行下去。

有几种解决方案：

① 随机生成一张地图，然后让程序首先进行检查，如果确认可以避免死锁问题，那么地图检测通过，否则重新生成，实现来讲趋于复杂，效率也比较低下，但是可以基本规避死锁问题。

② 随机生成一张地图，但并不进行合法性检查，但提供所谓的重排功能，即当无法继续游戏的时候可以重排游戏图案，在很大程度上来解决死锁问题，实现来讲比较简单，效率高效，但是并不能根本上解决地图死锁问题。

个人选择后者。

连接消除

对于一个如下图的棋盘:

连接消除

我们需要考虑 3 种消除情况：

0个转折点

就是点击的两张图片在一条直线上，并且中间没有障碍物才可以通行

0个转折点

1个转折点

点击的两张图片不在一条直线上，那么这两张图片可能存在的转折点有两个，在对角区域

1个转折点

2个转折点

这个就比较复杂，两个转折点可能的情况太多，只能枚举出来，然后循环判断

2个转折点

有没有什么好点的办法

我们可以先确定一个转折点，将这个转折点当成点击的图片，去和另一张图片匹配，这样我们就可以用判断「1个转折点」的方法+判断「0个转折点」的方法,来实现「两个转折点」复杂的情况，「这个时候只需要罗列出其中一个转折点可能出现的地方就行了」

在一个转折点的判断里面用的就是0个转折点的方法。

基本素材

图片

背景图

边框

基本图片

音乐

背景

消除提示音

错误提示音

通关提示音

人性化设计

选中元素的反馈

使用 2px 的红框标出。

手指划过的时候是粉红色（淡一些的红色）

长按的提示

按住一个元素。可以提示对应的元素位置。

淡红色闪烁。

消除的正反馈

点击之后，如何增强消除的效果，而不是直接没了？

可以有一条线，标出对应的路径。

对应的提示音。

圆角

图片一般是方，进行适当地圆角处理。

竞技模式

倒计时

为了增加游戏的紧张感与趣味性。

有一个对应的倒计时，可以是数字，也可以是进度条。

默认时间应该是多久？和关卡一一对应？

颜色的变化，时间充足，是绿色，然后是黄色，最后是红色。

星星

任何一关，都可以有 3 个星星。

星星本身可以作为分数，也可以作为货币，购买内置的道具。

星星可以解锁特殊关卡。

彩蛋。。。

分数

可以利用分数，给用户一个消除的提示。

排名

任何一款游戏，可以休闲，就可以竞技。

可以根据游戏本身的全局排名，也可以进行好友排名。

游戏难度

元素的个数

无序的程度

时间的长短

游戏的趣味性

小道具

比如增加时间

炸弹炸掉一个元素和对应的元素。

重新排序（随机调换）

消除后的变化

向上下左右 4 个方向平移

当前的 2 个列进行旋转变化

游戏

提示下一步该怎么走

游戏的特性

内置模式

内置多种连连看:

水果

麻将

宠物

美女

三国杀

王者荣耀

ps: 实际上只是素材资源的不同

自定义模式

允许用户自定义图片

参考资料

连连看算法实现

编程之美

https://www.17sucai.com/pins/tag/8645.html

https://www.iteye.com/blog/frosh-883882

“连连看”小析

https://cloud.tencent.com/developer/article/1667646?from=information.detail.html%E8%BF%9E%E8%BF%9E%E7%9C%8B%E6%BA%90%E4%BB%A3%E7%A0%81

https://www.cnblogs.com/beidan/p/7049007.html

网页版 连连看 html5实现

纯js版本网页连连看原理分析和实现