工作找不到，闲在家写个js的连连看，打发无聊时间，

最新推荐文章于 2024-08-14 18:50:50 发布
bojimiyabojimiya
最新推荐文章于 2024-08-14 18:50:50 发布
阅读量716
点赞数
文章标签：工作 path function html 框架 border
本文链接：https://blog.csdn.net/bojimiyabojimiya/article/details/8028302
版权
<html>
<head>
</head>
<body>
	<script>
	
	//设置游戏的初始值
	//横向数目
	var frame_height = 16;
	//纵向数目
	var frame_width = 16;
	//单元格宽度
	var td_width = 30;
	//单元格高度
	var td_height = 30;
	//图片
	var pictures = ["1.gif" ,"2.gif" ,"3.gif" ,"4.gif" ,"5.gif" ,"6.gif" ,"7.gif" ,"8.gif" ,"9.gif" ,"10.gif"];
	//点击历史，只记两部,全局的变量
	var clicks = [ "" , "" ];
	
	//下标转坐标,返回坐标数组,余数对应横坐标，商对应纵坐标
	var id2pos = function (id)
	{
		return [ id % frame_width ,  parseInt( id / frame_width ) ];
	}
	
	//坐标数组转下标，返回下标值
	var pos2id = function(pos)
	{
		return pos[1] * frame_width + pos[0];
	}
	
	//检查框架的正确性
	var check_frame = function( frame_height , frame_width )
	{
		if( frame_height * frame_width % 2 )
		{
			return true;
		}
		else
		{
			return false;
		}
	}
	
	//绘制图形
	var load_frame = function ( frame_height , frame_width , frame )
	{
		var html = "<table border='1px' >";
		for( var i = 0 ; i < frame.length ; i++ )
		{
			var td = "";
			
			var on_click = " onclick = 'click_pic(" + i + ',' + frame_height + ',' + frame_width + ");' ";
			var width_heigth = " width='" + td_width + "px' height='" + td_width + "px' ";
			// 当前位置无图片
			if( frame[i] == "" )
			{
				td = "<td id='pic_" + i + "' " + width_heigth + on_click + " ></td>" ;
			}
			// 当前位置有图片
			else
			{
				td = "<td id='pic_" + i + "' " + width_heigth + on_click +" ><img " + width_heigth + " src='img/" + frame[i] + "'/></td>" ;
			}
			// tr 换行 处理
			if( i % frame_width == 0 )
			{
				html += "<tr>" + td ; 
			}
			else if( i % frame_width == frame_width - 1 )
			{
				html += td + "</tr>" ; 
			}
			else 
			{
				html += td ;
			}
		}
		html += "</table>"
		return html;
	}
	
	//单击单元格触发的方法
	var click_pic = function( id , frame_height , frame_width )
	{
		if( clicks[0] == "" )
		{
			if( document.getElementById( "pic_" + id ).innerHTML != '' )
			{
				clicks[0] = id;
				document.getElementById( "pic_" + id ).style.border = "1px solid #ff0000";
			}
		}
		else
		{
			if( document.getElementById( "pic_" + id ).innerHTML != '' && id != clicks[0] )
			{
				if( clicks[1] == "" )
				{
					clicks[1] = id;
					document.getElementById( "pic_" + id ).style.border = "1px solid #ff0000";
					var path = cal( clicks[0] , clicks[1] , frame_height , frame_width );
					//如果匹配
					if( path )
					{
						//alert(path);
						//显示路径
						show_path( path );
						//消失图片
						document.getElementById( "pic_" + clicks[0] ).innerHTML = "";
						document.getElementById( "pic_" + clicks[1] ).innerHTML = "";
						
						if( if_end() )
						{
							alert("无可匹配的方块,游戏结束");
							return;
						}
					}					
				}
			}
			
			if( clicks[0] )
			{
				document.getElementById( "pic_" + clicks[0] ).style.border = "1px solid #000000";
			}
			if( clicks[1] )
			{
				document.getElementById( "pic_" + clicks[1] ).style.border = "1px solid #000000";
			}
			clicks = [ "" , "" ];
		}
		
	}
	
	//显示路径
	var show_path = function ( path )
	{
		for( var i = 0 ; i < path.length ; i++ )
		{
			document.getElementById( "pic_" + path[i] ).setAttribute( "bgcolor", "#ff0000" );
		}
		setTimeout( "hide_path('" + path.toString() + "')", 300 );
	}
	
	//隐藏路径
	var hide_path = function ( path )
	{
		path = path.split(",") ;
		for( var i = 0 ; i < path.length ; i++ )
		{
			document.getElementById( "pic_" + path[i] ).setAttribute( "bgcolor", "" );
		}
	}
	
	//计算两点之间是否满足要求，如符合要求返回路线数组的点
	var cal = function ( id1 , id2 , frame_height , frame_width )
	{
		var pos1 = id2pos(id1);
		var pos2 = id2pos(id2);
		var path = new Array();
		
		//不一样图片，肯定不对
		if( get_pic( pos1 ) != get_pic( pos2 ) )
		{
			return false;
		}
		
		//同横坐标，即在同一竖列上
		if( pos1[0] == pos2[0] )
		{
			path = get_line( pos2id(pos1) , pos2id(pos2) );
			if( path )
			{
				return path;
			}
			
			//排序保证循环 
			if( pos1[1] > pos2[1] )
			{
				var tmp_y = pos1[1];
				pos1[1] = pos2[1];
				pos2[1] = tmp_y;
			}
			
			//虚拟两个点，即转弯处
			var tmp_pos1 = [ , ];
			var tmp_pos2 = [ , ];
			
			for( var i = 0 ; i < frame_width ; i++ )
			{
				var tmp_pos1 = [ i , pos1[1] ];
				var tmp_pos2 = [ i , pos2[1] ];
				
				var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
				var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
				var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
				
				if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
				{
					var lines = new Array();
					//alert(lines.concat(line1 , line2 , line3 ));
					return lines.concat(line1 , line2 , line3 );
				}
				else
				{
					continue;
				}
			}
		}
		//同纵坐标,即同在一横排上
		else if( pos1[1] == pos2[1] )
		{
			path = get_line( pos2id(pos1) , pos2id(pos2) );
			if( path )
			{
				return path;
			}
			
			//排序保证循环 
			if( pos1[0] > pos2[0] )
			{
				var tmp_x = pos1[0];
				pos1[0] = pos2[0];
				pos2[0] = tmp_x;
			}
			
			//虚拟两个点，即转弯处
			var tmp_pos1 = [ , ];
			var tmp_pos2 = [ , ];
			
			for( var i = 0 ; i < frame_height ; i++ )
			{
				var tmp_pos1 = [ pos1[0] , i];
				var tmp_pos2 = [ pos2[0] , i];
				
				var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
				var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
				var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
				
				if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
				{
					var lines = new Array();
					//alert(lines.concat(line1 , line2 , line3 ));
					return lines.concat(line1 , line2 , line3 );
				}
				else
				{
					continue;
				}
			}
		}
		//其他情况
		else
		{
			var tmp_pos_1 = [ pos1[0] , pos2[1] ];
			var tmp_pos_2 = [ pos2[0] , pos1[1] ];
			
			var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos_1) );
			var line2 = get_line( pos2id(pos2) , pos2id(tmp_pos_1) );
			
			if( line1 && line2 && !get_pic(tmp_pos_1) )
			{
				var lines = new Array();
				return lines.concat(line1 , line2 );
			}
			
			line1 = get_line( pos2id(pos1) , pos2id(tmp_pos_2) );
			line2 = get_line( pos2id(pos2) , pos2id(tmp_pos_2) );
			
			if( line1 && line2 && !get_pic(tmp_pos_2) )
			{
				var lines = new Array();
				return lines.concat(line1 , line2 );
			}//-------------------------------------------------------
			
			//排序保证循环 
			if( pos1[1] > pos2[1] )
			{
				var tmp_y = pos1[1];
				pos1[1] = pos2[1];
				pos2[1] = tmp_y;
				
				var tmp_x = pos1[0];
				pos1[0] = pos2[0];
				pos2[0] = tmp_x;
			}
			
			//虚拟两个点，即转弯处
			var tmp_pos1 = [ , ];
			var tmp_pos2 = [ , ];
			
			for( var i = 0 ; i < frame_width ; i++ )
			{
				var tmp_pos1 = [ i , pos1[1] ];
				var tmp_pos2 = [ i , pos2[1] ];
				
				var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
				var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
				var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
				
				if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
				{
					var lines = new Array();
					//alert(lines.concat(line1 , line2 , line3 ));
					return lines.concat(line1 , line2 , line3 );
				}
				else
				{
					continue;
				}
			}
			
			//排序保证循环 
			if( pos1[0] > pos2[0] )
			{
				var tmp_y = pos1[1];
				pos1[1] = pos2[1];
				pos2[1] = tmp_y;
				
				var tmp_x = pos1[0];
				pos1[0] = pos2[0];
				pos2[0] = tmp_x;
			}
			
			//虚拟两个点，即转弯处
			var tmp_pos1 = [ , ];
			var tmp_pos2 = [ , ];
			
			for( var i = 0 ; i < frame_height ; i++ )
			{
				var tmp_pos1 = [ pos1[0] , i];
				var tmp_pos2 = [ pos2[0] , i];
				
				var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
				var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
				var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
				
				if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
				{
					var lines = new Array();
					//alert(lines.concat(line1 , line2 , line3 ));
					return lines.concat(line1 , line2 , line3 );
				}
				else
				{
					continue;
				}
			}
		}
		
		return false;
	}
	
	//判断是否结束
	var if_end = function ()
	{
		return false;
	}
	
	//获取两点之间的线
	var get_line = function ( id1 , id2 )
	{
		var line = new Array();
		var j = 0;
		
		var pos_1 = id2pos( id1 );
		var pos_2 = id2pos( id2 );

		//获取竖线
		if( pos_1[0] == pos_2[0] )
		{
			//排序保证循环 
			if( pos_1[1] > pos_2[1] )
			{
				var tmp_y = pos_1[1];
				pos_1[1] = pos_2[1];
				pos_2[1] = tmp_y;
			}
			
			//循环，看是否是通路,并返回
			for( var i = pos_1[1]; i <=  pos_2[1] ; i++ )
			{
				var tmp_pos = [ pos_1[0] , i ];
				if( !get_pic(tmp_pos) || i == pos_1[1] || i == pos_2[1] )
				{
					line[j++] = pos2id(tmp_pos);
				}
				else
				{
					return false;
				}
			}
			return line;
		}
		//获取横线
		else if( pos_1[1] == pos_2[1] )
		{
			//排序保证循环 
			if( pos_1[0] > pos_2[0] )
			{
				var tmp_x = pos_1[0];
				pos_1[0] = pos_2[0];
				pos_2[0] = tmp_x;
			}
			
			//循环，看是否是通路,并返回
			for( var i = pos_1[0] ; i <=  pos_2[0] ; i++ )
			{
				var tmp_pos = [ i ,  pos_1[1] ];
				if( !get_pic( tmp_pos ) || i == pos_1[0] || i == pos_2[0] )
				{
					line[j++] = pos2id(tmp_pos);
				}
				else
				{
					return false;
				}
			}
			return line;
		}
		else 
		{
			return false;
		}
	}
	
	//获取图片
	var get_pic = function( pos )
	{
		var tmp_id = pos2id( pos );
		var td = document.getElementById( "pic_" + tmp_id );
		if( td.innerHTML )
		{
			return td.childNodes[0].getAttribute("src");
		}
		else
		{
			return false;
		}
	}
	
	//获取实际框架
	var get_frame = function( frame_height , frame_width , tmp_frame)
	{
		if( check_frame( frame_height , frame_width ) )
		{
			alert("长高错误!");
		}
		
		//框架
		var frame = new Array( frame_height * this.frame_width );
		
		// ...
		var j = 0;
		for( var i = 0 ; i < frame.length ; i++ )
		{
			var pos = id2pos( i );
			//处于边界不赋值
			if( pos[0] == 0 || pos[1] == 0 || pos[0] == frame_width - 1 || pos[1] == frame_height - 1 )
			{
				frame[i] = "";
			}
			//中间赋值
			else
			{
				frame[i] = tmp_frame[j++];
			}
		}
		
		//返回框架
		return frame;
	}
	
	//获取中间全是图片那块区域
	var get_tmp_frame = function( frame_height , frame_width , pictures)
	{
		if( check_frame( frame_height , frame_width ) )
		{
			alert("长高错误!");
		}
		//临时数组
		var tmp_frame = new Array( ( frame_height - 2 ) * ( frame_width - 2 ) );
		
		//随机出来的临时数组的下标
		var k = 0;
		
		//图片在数组中的下标
		var index = 0 ;
		
		var i = 0 ;
		
		for( i = 0 ; i < (frame_height-2) * (frame_width-2) ; i+=2 )
		{
			//因为图片必须成对出现，所以一次取两个一样的
			var j = 0 ;
			for( j = 0 ; j < 2 ; j++ ){
				
				var k = parseInt( Math.random()*( (frame_height-2) * (frame_width-2) ) );
				
				//该位置已被占领则加1,直到没被占领
				while( tmp_frame[k] )
				{
					k++;
					if( k == (frame_height-2) * (frame_width-2) )
					{
						k = 0;
					}
				}
				
				tmp_frame[k] = pictures[index];
			}
			
			index++;
			//循环到最后一张图片，则重新从第一张图片选取
			if( index == pictures.length )
			{
				index = 0;
			}
		}
		return tmp_frame;
	}
	
	//测试
	/*
	var a = id2pos(12);
	alert( a[0] + " " + a[1] );
	var b = pos2id(a);
	alert(b);
	*/
	
	var a = get_tmp_frame( frame_height , frame_width , pictures);
	var b = get_frame( frame_height , frame_width , a );
	
	/*
	for( var i = 0 ; i< b.length ; i++)
	{
		document.write(b[i]+"<br/>");
	}
	*/
	
	var c = load_frame( frame_height , frame_width , b );
	document.write( c );
	
	//alert(get_pic([1,1]));
	//alert(get_line( [0,6] , [0,11] ) );
	</script>
</body>
</html>
bojimiyabojimiya
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
工作找不到，闲在家写个js的连连看，打发无聊时间，

//设置游戏的初始值 //横向数目 var frame_height = 16; //纵向数目 var frame_width = 16; //单元格宽度 var td_width = 30; //单元格高度 var td_height = 30; //图片 var pictures = ["1.gif" ,"2.gif" ,"3.gif" ,"4.gif" ,"5.gif"
复制链接

扫一扫