纯js版本网页连连看原理分析和实现-CSDN博客

html页面部分matching.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Matching Game </title>
<meta name="generator" content="editplus" />
<meta name="author" content="lijunliang" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/common.css" rel="stylesheet">
<link href="css/sunny/jquery-ui-1.8.8.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
</head>
<body>
	<div class="console"><a href="#"><img src="images/start.png" /></a></div>
	<div id="progressbar"></div>
	<div id="canvas">
	</div>
	<div id="dialog-win" title="Congratulations">
		<img src="images/winner-win.jpg" />
	</div>
	<script type="text/javascript" src="js/matching.js">
	</script>
	<script type="text/javascript" src="js/jquery.jplayer.min.js">
	</script>
</body>
</html>

使用的是Jquery框架进行的开发，html页面没有什么太多的东西，主要的地方就是div id = canvas这个区域

然后是js部分

基本功能的步骤是一下几个

1。初始化练连的画布这里使用div来花格子，代码如下

map:function(){
		var htmlstring = "";
		var box_count = 0;
		for(var i = 0 ; i < this.v_num+2 ; i++){
			htmlstring += "<div class='vmap clearfix'>";
			for(var j = 0 ; j < this.h_num+2;j++){
				if(box_count%2 == 0)
					htmlstring += "<div class='map_"+i+"_"+j+" map' data='-1' selected='false' path='"+i+","+j+"'></div>";
				else
					htmlstring += "<div class='map_"+i+"_"+j+" map maptwo' data='-1' selected='false' path='"+i+","+j+"'></div>";
				box_count++;
			}
			htmlstring += "</div>";
		}
		this.container.html(htmlstring); // this.container实际上就是canvas那个div 只是这里在类里面封装了一下
	}

2.给画布中的每个div填充一个背景图片来区分不同的元素

loadpic:function(){
		var param = this.getparam();
		var datas = this.getmapdata();
		var dbparam = this.dbparam();
		
		for(var i = 0 ; i < this.v_num+2 ; i++){
			for(var j = 0 ; j < this.h_num+2;j++){
				if(i == 0 || j == 0 || j == this.h_num + 1 || i == this.v_num + 1){
					$('.map_'+i+'_'+j).css("backgroundImage","none");
					$('.map_'+i+'_'+j).attr("data","-1");
					continue;
				}
				for(var m = 0 ; m < this.level ; m++){
					if(dbparam[m] > 0){
						var cpic = datas[m];
						$('.map_'+i+'_'+j).css("backgroundImage","url(images/"+cpic+".png)");
						$('.map_'+i+'_'+j).attr("data",m);
						$('.map_'+i+'_'+j).bind("click",{_this:this},this.findPath);
						dbparam[m]--;
						break;
					}
				}
			}
		}
		// 交换位置随机交换测试
		
		for(var i = 0 ; i < 1000 ; i++){
			var xpos1=parseInt(Math.random()*this.v_num + 1);
			var xpos2=parseInt(Math.random()*this.v_num + 1);
			var ypos1=parseInt(Math.random()*this.h_num + 1);
			var ypos2=parseInt(Math.random()*this.h_num + 1);
			
			var dom1 = $('.map_'+xpos1+'_'+ypos1),
				dom2 = $('.map_'+xpos2+'_'+ypos2);
			
			var temp = {
				bImage:dom1.css("backgroundImage"),
				data:dom1.attr("data")
			};
			
			dom1.css("backgroundImage",dom2.css("backgroundImage"));
			dom1.attr("data",dom2.attr("data"));
			
			dom2.css("backgroundImage",temp.bImage);
			dom2.attr("data",temp.data);
			
		}

这里面比较关键的地方打散那些在一起的背景图片

3.然后就是点击判断通路这种的网上算法很多，具体的可以自己去看看

然后还有一些别的功能，比如说preload

Demo网址是http://www.css-ajax.com/html5/version2/index.html

这个实际上就是做了个preload，load之后跳转到游戏页面

由于只是自己爱好进行的研究，目前好像不支持IE，我自己在chrome下开发的，其他的浏览器应该问题不大，没有使用html5开发。

然后希望有喜欢这种js游戏的一起研究一下。