web开发中连连看小游戏的制作案例-创新互联

小编给大家分享一下web开发中连连看小游戏的制作案例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一. 2个物体在同一直线上，可以直接连通 （这个不需要解释啦）

二.2个物体在同一直线上，中间有障碍物，不能直接连通 （2个转弯）

【循环遍历黄线中的交点，比如A,B点，再判断蓝线有没有障碍物，若没有，则可以连通，若有，则继续循环查找新的A,B点】

三. 2个对象不在同一直线上，一个转弯

【2个物体分别在所在位置进行x，y轴的延伸，如下图则交点为A,B。 只需判断2个交点到2个物体直接是否有障碍物，若没有，则可以连通】

四. 2个物体不在同一直线上，连线有2个转弯

【同二的原理，如下图，如果A,B 2个交点到物体均没有障碍物，则可以连通。其中A点的纵坐标和B相同】

另外一种情况，A,B 为2个物体所在x轴与中间y轴的交点，A,B的x坐标必须相同，连线如下：

以上就是四种连线算法判断，画图只画x轴的，每一种按照同样的原理增加y轴即可。可覆盖所有连线判断～

说完连线判断的逻辑之后，写一下整体的游戏框架，游戏基本使用原生javascript，使用createjs游戏引擎进行开发。

代码思路：

1. 绘制游戏画图，确定为多少宫图，由于是在移动端的小游戏，根据最小屏幕尺寸（iphone4  320*480），确定为7*9的宫图。

1. 创建一个二维数组，如果某个坐标上有物体，则设为1，否则为0

2.判断该位置是否有物体，只需要判断对应的二维数组上值是否为1，若为1，则有物体，否则没有。

至于画线，消除相同物体，只要会连线逻辑，肯定就会自己绘制线条，消除物体了，所以本篇文章就只讲连线判断啦～

在判断能否连线的时候，肯定是从最简单的方法开始判断,如下：

同一直线能否直线连通--->如何一点被包围，则不通--->两点在一条直线上，不能直线连接但是可以连通---> 不在同一直线但是可以连通

getPath: function (p1, p2) {//开始搜索前对p1,p2排序，使p2尽可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;
                p1 = p2;
                p2 = t;
            }else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;
                    p1 = p2;
                    p2 = t;
                }
            }//2点在同一直线上，可以直线连通if (this.hasLine(p1, p2).status) {return true;
            }//如果两点中任何一个点被全包围，则不通。else if (this.isWrap(p1, p2)) {return false;
            }//两点在一条直线上，不能直线连接但是可以连通else if (this.LineLink(p1, p2)) {return true;
            }//不在同一直线但是可以连通else if (this.curveLink(p1, p2)) {return true;
            }    
}