一个基于html5+jquery实现的连连看小游戏

        之前用html5+jquery写了个贪吃蛇，最近突然冒出个想法用同样的技术架构实现连连看，感觉用H5来实现起来比起其他语言自带的UI来说还是非常容易的，flex布局和dom操作的简单快捷优势还是非常大的。分享一下实现思路，请大佬们多多指导

1.游戏场地        

       游戏场景分两个部分，左侧放置功能按钮如开始游戏、重新打乱等及游戏时间和分数。右侧放置游戏用来配对消除的图片。

	
		
		
		
	
	
	

		

			

				得分：
				0
			
			

				时间：
				180
			
			

				游戏开始

				消除提示

				重新排列

			
		
		

	
	

   使用多个DIV来构建一个游戏场地（比如10X10  100个格子），用于连接路线的绘制和图片存放。其中最外圈不放图片，作为场地的边缘只用来计算和展示绘制的路线。每个DIV格子根据位置顺序横纵坐标以“-”连接命名Id，即最左上角DIV的Id为0-0，右侧的为1-0，方便在点击图片时根据Id获取该DIV在场地中的位置，用以计算两个点击图片间路线。

        var cas; //画笔对象，用来绘制连线
        //初始化10X10格子，id以xy坐标命名方便获取和遍历
		function initLabel(){
			let x=0;
			let y=0;
			$("#playground").html("");
			for (let i=0;i<100;i++){
				let newDiv=$("
");
				x++;
				if (x==10){
					x=0;
					y++;
				}
				$("#playground").append(newDiv);
			}
			//添加一块画布，用来展示连线
			$("#playground").append("");
			initPen();
		}
        //初始化画笔
		function initPen(){
			cas=$('#line')[0].getContext('2d');
			cas.lineCap = 'square';
			cas.lineWidth='10';
			cas.strokeStyle='#f66';
		}

         然后是图片填充和绑定事件，用js在规定范围内产生随机数，每个数字都对应着一张图片，通过相对路径的形式引用，同时给格子添加点击事件。

        //随机生成64个图片格子
		function randomImage(){
			//场地最外圈不放图片，只用于路径绘制，因此只有8X8=64个格子需要分配图片
			for (let i=1;i<=64;i+=2){
				//随机取一张图片，每张图片需要生成两个格子
				let num=Math.round(Math.random()*(75-1)+1);
				initImage('images/'+num+'.jpg');
				initImage('images/'+num+'.jpg');
			}

		}
		//将图片分配到空的格子中
		function initImage(path){
			let x=Math.round(Math.random()*(8-1)+1);
			let y=Math.round(Math.random()*(8-1)+1);
			let label=$("#"+x+"-"+y);
			if(label.hasClass("pic")){
				initImage(path);
			}
			else
			{
				//每一个有图片的格子增加一个名为pic的class用于判断格子中是否存在图片
				label.addClass("pic");
				label.css("background","url("+path+")");
				//自定义属性，用来记录该格子的图片类型，两个相同类型的格子才能消除
				label.attr("img",path);
				//为图片增加点击事件
				label.attr('onClick', 'mark(this);');
			}
		}
		function mark(obj){
			//点击格子增加变色
			$(obj).addClass("selected");
			//判断当前点击的是起始格子还是目标格子，分别记录两个格子对象
			if (current){
				//如果当前选择的是目标格子，则计算起始格子到目标格子的路径
				target=obj;
				eliminate();
			}else {
				current=obj;
			}
		}

2.连接路线计算

        连连看游戏的核心，选择了两个格子后需要计算从当前格子到目标格子是否存在中间没有其它图片的路径，且根据连连看的规则，路径只能有两个拐点。这里使用的是基于深度优先（DFS）算法的探路逻辑，什么是深度优先算法我就不详细解释了，有非常多的大佬讲解过。

        其实这里使用广度优先算法更合适，使用深度优先算法在场上格子消除6、7次后对内存的消耗非常的恐怖，页面会卡死。然而我深度优先算法的探路设计已经写了一大半了实在不想再费脑子改算法，偷个懒采用了判断路径拐点数量的策略来过滤掉过于复杂的不合理线路的探索来减少计算量（嘿嘿，大佬轻喷）

        //使用深度优先算法计算两个格子间最短路径
		//该方法有两个逻辑使用，1.玩家选择了两个图片后2.消除后判断剩余的图片排列是否还至少有一对可消除的
		function findRoute(cx,cy,route){
			let point=$("#"+cx+"-"+cy);
			if (point.length>0)
			{
				if (dfsArray[cx][cy]==true){
					return;
				}
				route+=cx+"-"+cy+"|";
				//判断当前探索的路径是否已超过两个拐点，如果是则终止当前路线探索节省资源
				if (!determinePath(route)){
					dfsArray[cx][cy]=false;
					return;
				}
				//探索到连接两点则合理的路线，判断目前格子是否存在可消除时没有目标点xy坐标，而是判断图片类型
				if ((cx==targetX&&cy==targetY)||(point.attr("img")==imageType&&route.split("|").length>2)){
					//判断是否为当前最短路线，如果是则记录
					if (route.split("|").length2){
				return false;
			}
			return true;
		}

        得到的有效路线可能存在多条，每次探索到新的路线时获取一下路线长度，只记录最短的一条。然后根据路径中每一个格子相对父级容器的坐标使用canvas 绘制一条线连接两个格子并执行消除。由于js执行速度非常快，不等看到连线就已经完成消除并擦除连线了，所以使用了定时setTimeout来延时半秒再执行消除，这样就能看到连线并消除的过程了。

3.提示和重新排序

        这块其实也没多少可说的了，在游戏开始时和每次消除完成后需要判断场上是否还存在至少一对可消除的图片，遍历场上现存的图片然后调用路线计算函数去找是否与一个相同类型的图片间有合理的路线，如果没有就获取场上剩余的图片重新随机分配位置。 消除提示就是在判断是否存在一对可消除格子的基础上把探索到的路线中第一个和最后一个图片涂色就完成了。

4.完整代码

        以下是成品代码，没有做页面美化设计，几个简单的线框作为游戏场景。其中图片文件可以自行准备以数字命名的图片放置在同级目录的images文件夹下，修改randomImage()中随机范围中的75为图片最大数量即可，过段时间会把完整的项目上传到github上（我想应该不会有人想去下载的，这个时间可以拖得更久一些~）

	
		
		
		
	
	
	

		

			

				得分：
				0
			
			

				时间：
				180
			
			

				游戏开始

				消除提示

				重新排列

			
		
		

	
	

	
	

        以上就是html5+jquery连连看的全部内容了，欢迎讨论和指导