本文详细解析了连连看游戏的逻辑，包括卡片消除规则、连线拐弯限制、动画友好设计，以及如何确保游戏始终有解。重点介绍了广度优先和分类算法的应用，以及拉斯维加斯算法与回溯法在生成有解棋盘中的运用。
文章目录
一、前言
连连看规则要求
1，相同的卡片可以消除
2，两张卡片间连线的拐弯不能超过两个
3，用户操作和消除要有较为友好的动画
4，游戏最后要有解
这个是3年前在新光供应链任职，子公司技术总监让写的一份程序，当然最后承诺的机械键盘还是没给我们😅
二、思路分析
2.1，相同的卡片可以消除
首先这条是相对容易实现的，我们需要用到的仅仅是绘图与点击事件。考虑使用canvas画布绘制出对应的图案即可。
这里我们用大家最喜欢的微软旗下的mspaint软件以6*6的方格绘制大致模型。四周的方块我们做预留，主要用在下一步的连线绘制上。
具体操作上我们需要自定义View，在onDraw方法中绘制即可。核心代码如下
/**
* 绘制棋盘的所有图标 当这个坐标内的值大于0时绘制
*/
for (int x = 0; x < map.length; x += 1) {
for (int y = 0; y < map[x].length; y += 1) {
if (map[x][y] > 0) {
Point p = indextoScreen(x, y);
canvas.drawBitmap(icons[map[x][y]], p.x, p.y, null);
}
}
}
实现效果如图
2.2，两张卡片间连线的拐弯不能超过两个
这里是实现思路的核心，我们在考虑连接卡片的时候需要分析下，这里的连通算法要求至多两个拐点表示相连,也就是最多3条直线。这里我们需要用到分类算法与广度优先算法。
1，广度优先：两个节点node1和node2，将能和node1直接相连的节点加入集合S，然后再将能和S集合中节点直接相连的节点加入S（去重复），最后再将能和S集合中节点直接相连的节点加入S（去重复），如果node2在S集合中，则表示两者相连。
2，分类算法：（此程序采用）首先判断两个节点是否可以直接相连，如果否，则两个节点是否可以通过一个拐角相连（两个节点是一个正方形的对角线），如果还是否，则判断两个节点是否可以通过两个拐角相连。
具体分析如下
1，两个节点是否可以直接相连，
2，如果否，则考虑能否通过2条直线相连，
3，如果否，则考虑3条直线相连
4，否则就是不可连接
1）两个节点是否可以直接相连
这种情况我们需要考虑竖直与水平两种情况
比如Point(1,1)到Point(3,1)为水平方向，Point(1,2)到Point(1,4)为竖直方向，核心算法如下
//这是针对一条线的情况
private boolean linkD(Point p1, Point p2) {
//case 1:在同一条垂直线上
if (p1.x == p2.x) {
int y1 = Math.min(p1.y, p2.y);
int y2 = Math.max(p1.y, p2.y);
boolean flag = true;
for (int y = y1 + 1; y < y2; y++) {
if (map[p1.x][y] != 0) {
flag = false;
break;
}
}
if (flag) {
return true;
}
}
//case 2:在同一条水平线上
if (p1.y == p2.y) {
int x1 = Math.min(p1.x, p2.x);
int x2 = Math.max(p1.x, p2.x);
boolean flag = true;
for (int x = x1 + 1; x < x2; x++) {
if (map[x][p1.y] != 0) {
flag = false;
break;
}
}
if (flag) {
return true;
}
}
return false;
}
2）如果否，则考虑能否通过2条直线相连
这种情况我们需要考虑"﹂“型、”﹁"型两种情况
比如从Point(1,1)到Point(3,2)的路径上，我们需要定位到中间拐点，即Point(3,1)、Point(1,2)，其中任意一点能通则认为是连通的。核心算法如下
//判断两个点是否可以连接，并将可以连接的中间点全部记录在path中，用于连线动画
private boolean link(Point p1, Point p2) {
//如果是同一个点的话就返回false
if (p1.equals(p2)) {
return false;
}
//下面都不是同一个点
path.clear();
if (map[p1.x][p1.y] == map[p2.x][p2.y]) {
//case 1:一条线可以连接的情况
if (linkD(p1, p2)) {
path.add(p1);
path.add(p2);
return true;
}
//case 2:两条线可以连接的情况
//2.1"﹂"型
Point p = new Point(p1.x, p2.y);
if (map[p.x][p.y] == 0) {
if (linkD(p1, p) && linkD(p, p2)) {
path.add(p1);
path.add(p);
path.add(p2);
return true;
}
}
//2.2"﹁"型
p = new Point(p2.x, p1.y);
if (map[p.x][p.y] == 0) {
if (linkD(p1, p) && linkD(p, p2)) {
path.add(p1);
path.add(p);
path.add(p2);
return true;
}
}
expandX(p1, p1E);//加载p1水平方向的所有点
expandX(p2, p2E);//加载p2水品方向的所有点
for (Point pt1 : p1E) {
for (Point pt2 : p2E) {
if (pt1.x == pt2.x) {//如果水平值相等，即在同一垂直线上就有可能连接
if (linkD(pt1, pt2)) {
path.add(p1);
path.add(pt1);
path.add(pt2);
path.add(p2);
return true;
}
}
}
}
//换成垂直方向上的同理可得
expandY(p1, p1E);
expandY(p2, p2E);
for (Point pt1 : p1E) {
for (Point pt2 : p2E) {
if (pt1.y == pt2.y) {
if (linkD(pt1, pt2)) {
path.add(p1);
path.add(pt1);
path.add(pt2);
path.add(p2);
return true;
}
}
}
}
return false;
}
return false;
}
3）如果否，则考虑3条直线相连
这种情况我们仍然要考虑水平与竖直方向，这里仅以水平方向阐述思维方式
- 这里从Point(2,1)到Point(1,3)的路径上，我们获取Point(2,1)在水平方向上的延伸区域，得到点的集合Point(0,1)、Point(1,1)、Point(5,1)共计3个点
- 同理我们获取Point(1,3)在水平方向上的延伸区域，得到点的集合Point(0,3)共计1个点
- 然后使用双层循环判断，Point(2,1)在水平方向上的延伸点与Point(1,3)在水平方向上的延伸点是否可以用直线连接。
- 这里我们找到Point(0,1)与Point(0,3)是直线连通点，即从Point(2,1)到Point(1,3)的路径上可以3条直线相连
核心算法如下
//将p点左右的点都加到l中去
private void expandX(Point p, List<Point> l) {
l.clear();
for (int x = p.x + 1; x < xCount; x++) {
if (map[x][p.y] != 0) {
break;
}
l.add(new Point(x, p.y));
}
for (int x = p.x - 1; x >= 0; x--) {
if (map[x][p.y] != 0) {
break;
}
l.add(new Point(x, p.y));
}
}
2.2，用户操作和消除要有较为友好的动画
我们在进行连通判断的时候，保存了有用户连通点的路径path.add(p1)。这里我们仅仅需要用这些连通点在方块中间绘制直线即可
代码实现如下
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 绘制连通路径，然后将路径以及两个图标清除
*/
if (path != null && path.length >= 2) {
for (int i = 0; i < path.length - 1; i++) {
Paint paint = new Paint();
paint.setColor(Color.CYAN);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
Point p1 = indextoScreen(path[i].x, path[i].y);
Point p2 = indextoScreen(path[i + 1].x, path[i + 1].y);
canvas.drawLine(p1.x + iconSize / 2, p1.y + iconSize / 2,
p2.x + iconSize / 2, p2.y + iconSize / 2, paint);
}
/**
* 消除连线上的第一个path[0]
*/
Point p = path[0];
map[p.x][p.y] = 0;
/**
* 消除连线上的最后一个path[0]
*/
p = path[path.length - 1];
map[p.x][p.y] = 0;
/**
* 消除
*/
selected.clear();
/**
* 1,消除线条:(path == null && path.length < 2)
* 2,由后面的this.invalidate()方法刷新
*/
path = null;
}
/**
* 绘制棋盘的所有图标 当这个坐标内的值大于0时绘制
*/
for (int x = 0; x < map.length; x += 1) {
for (int y = 0; y < map[x].length; y += 1) {
if (map[x][y] > 0) {
Point p = indextoScreen(x, y);
canvas.drawBitmap(icons[map[x][y]], p.x, p.y, null);
}
}
}
/**
* 绘制选中图标，当选中时图标放大显示
*/
for (Point position : selected) {
Point p = indextoScreen(position.x, position.y);
if (map[position.x][position.y] >= 1) {
canvas.drawBitmap(icons[map[position.x][position.y]], null, new Rect(p.x - 5, p.y - 5, p.x + iconSize + 5, p.y + iconSize + 5), null);
}
}
}
具体效果(这里特意放大便于效果图)
4）否则就是不可连接
在判断第一个Point不可连接后，我们需要循环判断棋盘上所有的Point是否可以连接，如果都不能连接。则分析问题出在
1，棋盘初始化本就无解
2，本来整个棋盘是可以完全消除所有单元格的，但是由于我们操作的顺序发生了变化，最终导致棋盘无解。
2.4，游戏最后要有解
关于连连看有解，我查阅了下文档加上自己思索了下，大概有以下几种处理方法
1）当出现所有图案均无法连时，游戏会自动洗牌。
这种处理方法demo中有加上，好处是棋子的随机性特别强，对于玩家来说难度挑战可以最大化，缺点是打乱图案是一种极不友好的交互方式。参考新浪微博、参考NGA
2）使用拉斯维加斯算法+回溯法初始化有解的棋盘
1）清空地图
2）随机生成一个图块，并执行下一行：随机在另一处生成同样的图块，如果之间有通路，就保留，否则回到上一行重新生成；
3）如果这样下去能生成整张地图，就结束，否则回溯继续试探。 也就是随机试探着一对一对地增加图块。
这是个拉斯维加斯算法+回溯法。又因为连连看破解的时候是从外向内的，类似拓扑排序，所以从简单往复杂方向生成的话，可以保证最后可破解的。
这个意义不大
1，算法时间复杂度开销太大。需要不停的回溯。
2，从概率的角度讲，实现一种生成有效棋盘的算法没有多大意义，因为即使产生的棋盘有效，我们在游戏时，最后也有可能将游戏的棋盘玩死。参考知乎
3）内置多种怎么操作都可解的棋盘
4）游戏体验上给玩家新增道具消除
这个在棋子比较多的时候体验还行，像上图只有4个的情况下也会显得非常尴尬
5）有规律的初始化棋盘
规律可以是在保证有解的情况下轻微的颠倒棋子顺序，或者初始化棋盘的时候先有规律地初始化棋盘中心等方式，这种处理方法demo中也有加上。体验上可以保证有解，但是对于玩家来说难度挑战就难以最大化。
三、写在最后的话
demo下载地址，免积分下载，如果需要积分可以留言邮箱。
这个确实是做前端程序好啊，想写个什么出来玩，就可以真的弄个出来玩。对于文中处理方式，大家如果有更好的方法，或者觉得哪里有问题的欢迎留言。如果觉得有用，欢迎收藏或者打赏
扫一扫
2465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
