制作简单的连连看

最新推荐文章于 2020-12-01 05:24:53 发布
最新推荐文章于 2020-12-01 05:24:53 发布
阅读量228 收藏 2
点赞数
分类专栏： web 前端处理 文章标签： JavaScript ViewUI

 

 面向对象练习游戏。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <style type="text/css">

	.container{
		border:1px solid #000000;
		width:70%;
		height:600px;
		clear:both;
		float:left;
	}

	table{
		border:1px solid #000000;
		width:100%;
		height:100%;
		text-align:center;
		font-size:25px;
		border-collapse:collapse;
		empty-cells:show;
	}

	.border{
		border:1px solid red;
	}

 </style>

 <BODY>

 
行数<INPUT id="setrow" type="text" value="16" size="2">&nbsp;
列数<INPUT id="setcol" type="text" value="9" size="2">&nbsp;
图片数<INPUT id="setpic" type="text" value="12" size="2">&nbsp;
时间<INPUT id="settime" type="text" value="60" size="3">秒&nbsp;
<BUTTON οnclick="init();">重置</BUTTON>&nbsp;
<DIV id="timeleft" style="float:left;"></DIV>
<DIV id="timebar" style="height:5;width:600;background-color:white;"></DIV>
<DIV id="container" class="container"> </DIV>
 </BODY>
  <script src="jquery-1.7.2.js"></script>
<SCRIPT LANGUAGE="JavaScript">
	 

	 
	// alert( parseInt(Math.random()*12 )   ); 
	//保存第一次 点击的对象  pic 与 td 
	var pic_first_click =  null ;
	var td_first_click =  null ;
	var bgPicArray = null;
	var background = null;
	
	//最大的列数
	var maxRow = 0; 
	//最大的行数 
	var maxCol =  0;
		
	function init(){
		 var contents = [ 'a','b','c' ,'d','e','f' ,'g' ,'h','i','g', 'k' , 'l' ];
		
		 var setrow = $('#setrow').val();
		 var setcol = $('#setcol').val();
		 
		 maxRow =  parseInt(setrow)+2 ;
		 maxCol =  parseInt(setcol)+2;
		 background = new Background(maxRow , maxCol );
		 background.initbg( contents );
	     var table = background.genBGTable(); 
		 //alert(table );
		 $('#container').html( table );
	}

	//消除 表格中元素 
	function removeEle( obj ){
	 	 
		var l = $(obj).attr('l');
		var h =  $(obj).attr('h');
		var pic_current_click = background.datas[h][l];


		  
		if(td_first_click == null){
			//alert(pic_current_click +"  "+ pic_current_click.point.x   );
			 if(   pic_current_click.getIsRemove()  ){
				   return ;
			}
			td_first_click = obj ;
			pic_first_click = pic_current_click;
			$(td_first_click).addClass('border');
			 
		}else{

			  //alert( background.linkXY(pic_first_click ,pic_current_click) );
			  //alert( pic_first_click.getIsRemove() +"  "+ pic_current_click.getIsRemove() );
			  //判断对象是否被移除 
			  if(   pic_current_click.getIsRemove()  ){
				   //alert(" 对象 remove ");	
				   return ;
			  }
 
			  if(background.linkXY(pic_first_click ,pic_current_click)
					  && pic_current_click.judgeSame( pic_first_click ) ){
				
				 $( obj).html('');
				 $( td_first_click ).html('');
				 //$( obj).removeAttr('content');
				 //删除 pic 
				 pic_current_click.setIsRemove(true);
				 pic_first_click.setIsRemove(true);
	 
			  }
 
			 //remove first click trace 
			 $(td_first_click).removeClass( ); 
			 td_first_click = null;
  			 pic_first_click = null;
		}

	}

	 //构造背景对象  
	 function Background( setrow , setcol ){
		 //行
		 this.row =  setrow ;
		 //列
		 this.col = setcol ;
		 //场景 数组  内部存放 picture 对象
		 this.datas = getDatas( setrow , setcol );

		 function getDatas(setrow,setcol ){
			 
			 if(setrow==null || setrow==0  ){
					alert( "行不能为空");
					return null;
			 }
			 if(setcol == null || setcol==0 ){
				alert('列不能为空');
				return null;
			 }
			 //   x坐标是行       y坐标是列
			 var datas = new Array(setrow );
			 for( var i=0;i < setrow;i++   ){
			    var column = parseInt(setcol) ;
				datas[i] = new Array( column );
				var point = null ;
				var pic = null ;
				for(var j=0;j< column ;j++ ){

					 point = new Point( j , i );
					 pic = new Picture('',point);
			 
					 if(i==0 || j==0 || i== (setrow-1) || j==(setcol-1)   ){
						 //边框处 状态为移除 
						 pic.setIsRemove(true);
					 }
					 //pic.setBackGround( this );
					 datas[i][j] = pic;
					 //alert( $(pic.getTdObj()));
				}
			 }
			 return datas;
		 }
	 }

	 //背景  数据 填出 内容 
     Background.prototype.initbg = function(contents  ){
		 
		 if( this.datas == null || this.datas.length ==0 ){
				alert("请初始化背景数组");
				return  ;
		 }
		 
		 if(!contents){
			  alert("没有设置背景内容");
		 }

		 var witchChar = 0 ;
		 //可能会出现 单个的内容       注意         x坐标是行       y坐标是列
 		 for( var i=1;i< this.row -1  ;i++ ){
 			for(var col_temp=1;col_temp< this.col-1; col_temp++  ){
				witchChar = randomInt( contents.length );
				
				this.datas[i][col_temp].content = contents[witchChar];
			}

		 }  
	 }

	// 生成背景 html  ，注意         x坐标是行       y坐标是列
     Background.prototype.genBGTable = function( ){
		 
		 if( this.datas == null || this.datas.length ==0 ){
				alert("请初始化背景数组");
				return ;
		 }
		 
		 var htmlStr = "<table border='1'>";
		
		 for(var i=0 ;i<this.row;i++   ){
			 var point = null ;
			 var pic = null ; 
			 htmlStr = htmlStr + "<tr>";
			 for(var j=0 ;j< this.col;j++   ){
				 point = new Point(j , i);
				 pic = new Picture(this.datas[i][j] , point )
				 
				 if(this.datas[i][j].content==null || this.datas[i][j].content==''){
					 htmlStr = htmlStr+"<td  h='"+i+"' l='"+j+"' content='' id='"+i+j+"'>&nbsp;</td>";
				 }else{
					htmlStr = htmlStr+"<td  id='"+i+j+"' οnclick='removeEle(this)' h='"+i+"' l='"+j+"' content='"+this.datas[i][j].content+"'>"+ this.datas[i][j].content +"</td>";
				 }
				 
			 }
			htmlStr= htmlStr+ "</tr>";
		 }
		htmlStr= htmlStr+ "</table>";
		return htmlStr;
	 }

	 //判断x 方向连接 
	 Background.prototype.linkX = function( picture1 ,picture2 ){
		   var x1  = picture1.point.x;
		   var y1  = picture1.point.y;
		   var x2  = picture2.point.x;
			
		   
		   for(var i=x1; i!=x2; (x1<x2)?i++:i-- ){
			    if( i==x1 ) continue;
				if( !this.datas[y1][i].getIsRemove()    ){
					return false;
				}
		   }
		   return true;
	 }

	 //判断Y 方向连接 
	 Background.prototype.linkY = function( picture1 ,picture2 ){

		   var x1  = picture1.point.x;
		   var y1  = picture1.point.y;
		   var y2  = picture2.point.y;
			
		   
		   for(var i=y1; i!=y2; (y1<y2)?i++:i-- ){
			   //alert(this.datas[y1][i].getTdObj() );
			    if( i==y1 ) continue;
				if( !this.datas[i][x1].getIsRemove() ){
					return false;
				}
		   }
		   return true;
	 }

	
	 // 三条线连接 
	 Background.prototype.linkXY = function( pic1 ,pic2 ){
			
			var picture1 = pic1 ;
			var picture2 = pic2 ;
			
			var x1  = picture1.point.x;
			var y1  = picture1.point.y;
			var x2  = picture2.point.x;
			var y2  = picture2.point.y;
			  
			//if( this.linkY(picture1,picture2 )) return true;	
			//if( this.linkX(picture1,picture2 )) return true;	
		   
		   if(  this.linkX(picture1,picture2) && this.linkY( picture2 , picture1 ) ) return true;  
	       if( picture1.isHigher(picture2) ){
				var p =picture1;
				picture1 = picture2;
				picture2 = p;
		   }
	       
			//  y -
		   for(var i=x1-1;i>=0;i-- ){
				if( !this.datas[y1][i].getIsRemove() ) break;
				if( this.linkY(this.datas[y1+1][i] ,pic2 ) 
						&& this.linkX(pic2 ,this.datas[y1][i]  ) ){
					return true;
				}
		   }
			// y + 
		   for(var j=x1+1 ;j< maxCol  ;j++ ){
				if( !this.datas[y1][j].getIsRemove() ) break ;
				if(  this.linkY(this.datas[y1+1][j] ,pic2 ) 
						&& this.linkX(pic2 , this.datas[y1][j] ) ){
					return true;
				}
		   }
 

		   if(!picture1.isLeft(picture2)){
				var p =picture1;
				picture1 = picture2;
				picture2 = p;
		   }

			// x - 
		   for(var m=y1-1 ;m > 0 ;m-- ){
				if(  !this.datas[m][x1].getIsRemove() ) break;
				if(  this.linkX( this.datas[m][x1+1],pic2 )  
						&& this.linkY(pic2 ,this.datas[m][x1+1] )   ){
					return true;
				}	
		   }
		   
			// x + 
		   for( var m=y1+1 ;m < maxRow  ;m++ ){
				if(  !this.datas[m][x1].getIsRemove() )  break;
				if( this.linkX( this.datas[m][x1+1],pic2 )  
						&& this.linkY(pic2 ,this.datas[m][x1+1] )   ){
					return true;
				}
		   }

			return false;
		      

		    /*

		   if(!picture1.isLeft(picture2)){
				var p =picture1;
				picture1 = picture2;
				picture2 = p;
		   }
			
		   if( this.linkX(picture1,picture2 )) return true;

		   for(var i=0;i<(picture1.point.x-1) ; i++   ){
				 
				 var point_temp = new Point(  i , picture1.point.y );
				 var pic_temp = new Picture('','' );
				 
				if(this.linkX(picture1,picture2 ) ){
					
				}
		   }


		   */
	 }


	 //随机 产生 一定范围内的数字
	 var randomInt = function(limit ){
		if(isNaN(limit)){
			alert("请输入合法数字");
			return null;
		}
		return parseInt(Math.random()*limit);
	 }
	



	 //点
	 function  Point(x , y ){
		this.x = x ;
		this.y  = y ;
		this.getX = function (){
			return this.x ;
		}
		this.getY = function (){
			return y;
		}
	 }
	 // judge  same point 
	Point.prototype.judgeSamePosition= function(point ){
			 
			if( this.x ==point.x && this.y == point.y ){
				return true;
			}else{
				return false;
			}
	}
 


	 //图片
	 function Picture(content , point ){
		 
		  this.tdObj = null;//  pic 对象与表格的那个td 对象对应 
		  this.backGround = null;  //pic 在那个背景中
		  this.point = point;
		  this.content = content ;
		  this.isRemove = false;
		  this.getPoint = function(){
			return this.point;
		  }
		  this.getContent = function(){
			return this.content ;
		  }
	 }

	 //设置  对象是否被移除 	
	 Picture.prototype.setIsRemove=function(isRemove){
		this.isRemove = isRemove;
	 }
	 // 取得 是否移除 对象 
	 Picture.prototype.getIsRemove = function(){
		return this.isRemove ;
	 }	 
	 //pic 与背景 的关系
	 Picture.prototype.setBackground = function(backGround){
		 this.backGround = backGround ; 
	 }
	 //pic 与背景 的关系
	 Picture.prototype.getBackground = function(backGround){
		return  this.backGround  ; 
	 }
	  
	 
	   //judge same  Picture 
	  Picture.prototype.judgeSame = function(picture){
		  //alert( this.point +"  "+this.point.getX() +"  "+this.point.getY()   );
		  if(this.getIsRemove()){
			return false;
		  }
		  if( this.point.judgeSamePosition( picture.point)){
				return false;
		  } 

		  if(this.content == picture.content ){
			  return true;
		  }else{
 			  return false;
		  }
		}

	    // 判断是否在上面 
		Picture.prototype.isHigher = function(picture){
			 if( picture.point==null || picture.point.y==null 
					|| this.point==null  ||  this.point.y==null ){
					alert("参数不正确");
					return false;
			 }

			 if( this.point.y >picture.point.y  ){
					return true;
			 }else{
				return false;
			 }
		}

	    // 判断 是否 在左边 
		Picture.prototype.isLeft = function(picture){
	      
			if( this.point ==null || this.point.x==null 
					|| picture.point == null || picture.point.y==null ){
				alert("参数不正确");
				return false;
			}

			if( this.point.x <picture.point.x ){
				return true;
			}else{
				return false ;
			}
		}


		


	var point1  =  new Point(1 ,2 );
	var point2 =  new Point(1 ,23 );
 
	var picture1 = new Picture( 'y' ,point1 );
	var picture2 = new Picture('b' ,  point2 );
	 //测试picture类
	//alert(picture1.judgeSame( picture2) ); 
 
   

</SCRIPT>
</HTML>

 

 

 我是做java的，做这个东西是为了练习一下javascript ，不知道我写的js是否符合js 代码规范，如果有做js的请留下一点宝贵建议，谢谢

基于C#制作一个连连看小游戏
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
01-30 3838
基于C#制作一个连连看小游戏，实现：难易度选择、关卡选择、倒计时进度条、得分计算、音效播放等功能。
JQuery 网页连连看
07-16
test-1.html 直接对连连看引擎的测试页面，包含两个连连看地图，都采用默认的风格，两个连连看的尺寸大小分别是4行4列和4行6列 test-2.html 直接对连连看引擎的测试页面，只包含一个连连看地图，采用默认的风格，尺寸大小是10行8列，依次使用了右移、下移、左移、上移四个插件，显示连连看debug信息。
最简单的连连看
03-07
入门级作品 没有花里胡哨的东东 判断消去算法用的是“十”字扫描法，即在两小图之间画一长线和两短线，先横向从上到下，再纵向由左至右，效率不高但是简单。随机程序不是很好。vc++6.0下编译成功。
没事写着玩 系列之 JQ连连看(很丑陋,很初级)
weixin_34310127的博客
03-19 92
说明:(图片自备, 名称为 jpg[0,2].jpg class为( one two three)对应 前面的 0,1,2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &lt...
自制图标连连看，所有图标可DIY
01-07
我自己开发的一款新颖的连连看，玩家可以自己制作图标，操作简单，你可以将你和朋友的头像、宠物、摄影图片等轻松截取，作为连连看的图标，然后将这个游戏作为礼物送给你最亲近的人。 绿色版，无需安装。 解压后直接运行llk.exe既可以玩了。 PicDiy.exe是轻松制做DIY图标的工具，一看就知道怎么用。
简易连连看
SIH__的博客
05-08 980
新建文本文档，复制下面的代码，保存，文件名：index.html，打开&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initi
连连看jquery版
09-09
比较闲的时候，做了个连连看，做成了JQuery的插件的形式，不需要flash，使用JQuery的平移效果，自己完成的动画效果（使用的google首页的图片）。由于个人素材有限，所以比较简单。
易语言制作连连看小游戏的代码
08-26
易语言是一种专为初学者设计的编程语言，其语法简洁明了，适合用来制作各种简单的小游戏，如连连看。连连看游戏的核心在于图像匹配，玩家...通过理解这些代码，初学者可以学习到易语言的基本语法和制作简单游戏的方法。
Delphi制作字母连连看小游戏
12-13
Delphi是一款强大的面向对象的编程工具，它基于Pascal语言，提供了直观的集成开发环境（IDE）和丰富的组件库，使得游戏开发变得相对简单。 首先，我们需要理解连连看游戏的基本规则。这种游戏通常包含两个主要部分...
gdh.rar_FlashMX 游戏_flash连连看制作教程_游戏 flash_连连看源码
09-23
本教程将深入探讨如何使用Flash MX工具来制作一款类似“宠物连连看”的游戏，帮助开发者更好地理解和掌握游戏开发技巧。 一、Flash MX简介 Flash MX是Adobe公司推出的多媒体创作工具，主要用于创建交互式网页动画、...
cocos creator实例--使用creator简单实现连连看游戏 | 附代码LLK.zip
01-17
在本实例中，我们将探讨如何使用Cocos Creator构建一个简单的连连看游戏。 连连看游戏的基本玩法是找到并消除一对相同的图案，当所有图案配对成功后，游戏胜利。以下是实现这个游戏的关键步骤和涉及的技术点： 1. ...
lianliankan:用jquery写了一个连连看游戏的插件
06-09
链接游戏 ============== 一个jquery的链接游戏插件 开始 $ git clone https://github.com/ch-daisy/lianliankan.git $ cd lianliankan $ npm install $ npm start 然后打开浏览器访问http://localhost:3000
html游戏代码_JS实现连连看小游戏，代码很简单，思路很清晰！
weixin_39520393的博客
12-01 1570
前言：这是web前端源码交流QQ群：828036770领取素材资料开发工具和听课权限！每日仅限300名！！！这是一款比较经典的连连看游戏源码，规则比较简单，基于html5实现的连连看网页游戏。游戏目前设置了7关，玩家可以逐级挑战，还可点击右下角【重置】进行位置调整，游戏有时间限制，重置没有次数限制。游戏特点：本源码实现了随机重排和背景以及点击音效。总共有初级、中级和高级三个难度可以设置，...
自制连连看小游戏
在山林与荆棘间不断成长
07-04 979
下载地址
下载了：图标连连看
猫鱼酱
12-15 3338
 在写过Python版和JavaScript版连连看的算法后，特为JavaScript版连连看算法写了一个图形交互界面。至此完整的连连看游戏出炉了。下面是文件下载网址：http://download.csdn.net/source/873086下面是界面的代码：html>    head>        title>图标连连看title>    head>   
VB实训——电脑图标版连连看 连连看VB
05-07 428
经由十去天的努力，从最初的算法，到一个一个功能的实现，都是一字一句想出去然后敲进去的。现在终究把连连看做得像个样子了，哈哈！真是功夫没有负有心人，虽然累了，但是我非常的快乐。 代码如下： Private Sub creatgame(bmps As Long) '创建游戏         If pics = n * (n - 4) + 1 Then pics = 1 '如果找到末尾
自制JQuery版连连看
longlongago的博客
07-23 1982
<br /> <br />直接看效果：JQuery版连连看<br />下载Demo：JQuery版连连看下载<br />如无特殊说明，本站内容均为原创，转载请注明： 转载自longlongago<br />本文链接地址:http://blog.long1986.com/blog/20100704448/home-jquery-version-lianliankan.html
网站推荐
热门推荐
hfly2005的专栏
03-07 13万+
http://www.gotoandlearn.com/http://www.eurodns.com/user/index.phphttp://www.oado.com/down_list.asphttp://www.chinaui.comhttp://www.phpw.nethttp://www.phpchina.cnhttp://www.phpv.net/http://www.phpe.net
H264一些不错的网站
我想 我做
03-10 6万+
http://3ms.huawei.com/hi/blog/10004_2400173.html http://javapyer.iteye.com/blog/1989274 https://github.com/zhanghuicuc/ffmpeg_camera_streamer/blob/master/ffmpeg_camera_streamer/ffmpeg_camera
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值