金馆长连连看 Web游戏 基于HTML+CSS+JavaScript

最新推荐文章于 2023-06-06 18:29:33 发布
VIP文章 最新推荐文章于 2023-06-06 18:29:33 发布
阅读量1.5k 收藏
点赞数
分类专栏： JavaScript 小程序 文章标签： 金馆长 连连看 HTML+CSS+JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caicaijingyuan/article/details/43202985
版权

金馆长连连看——木有美化版

代码：2000+ 当然里面重复性代码很多

代码链接：http://download.csdn.net/detail/u013938944/8403107


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>连连看</title>
<style>
body
{
	padding:0;
	margin:0;	
}
table
{
	border-collapse:collapse;	
}
td{
	with:80px;
	height:80px;	
	padding:0;
	margin:0;
	
	text-align:center;
}
tr{
	width:480px;
	height:80px;
	padding:0;
	margin:0;
}
</style>
<script language="javascript" type="text/javascript">
var zuobiao;
var quanjushuzu = new Array(new Array(3),new Array(3));
var arr0 = new Array(3);
var arr1 = new Array(3);
var quanjushu = 0;
var panduan;
function init()
{
	var tab = document.getElementById("mytab");
	for(var i = 0; i < 6; i++)
	 {
		 for(var j = 0; j <6; j++)
		 {
			 tab.rows[i].cells[j].innerHTML="<img src='0.png'/>";
			 tab.rows[i].cells[j].value=0;
			 tab.rows[i].cells[j].zuobiao = "i"+"j";
			 
		 }
		 
		 
	 }
	 for( var num = 0; num<2;num++)
	 {
	 	
		chuxian(2);
		chuxian(4);
		chuxian(8);
		chuxian(16);
		chuxian(16);
		chuxian(32);
		chuxian(32);
		chuxian(64);
		chuxian(128);
		chuxian(128);
	 }
}

function chuxian(number)
{
	<!--一定要再次声明获取表格的id，在Init()函数里声明的id对象引用是局部变量，如果在函数外面声明会出现引用不到的情况，因为此时还没有加载完表格，没有此id对象-->
	var tab = document.getElementById("mytab");
	var hang = Math.random()*6;
	hang = Math.floor(hang);
	var lie = Math.random()*6;
	lie = Math.floor(lie);
	if(tab.rows[hang].cells[lie].value == 0) {
	tab.rows[hang].cells[lie].innerHTML="<img src='"+number+".png'/>";
	tab.rows[hang].cells[lie].value= number;
	}
	else{
			
		chuxian(number);
	}
		
}

function dianji(e)
{
	var tab = document.getElementById("mytab");
	var x = e.clientX;
	var y = e.clientY;
	
	var hangnum = Math.floor(y/80);
	var lienum = Math.floor(x/80) ;
	if(tab.rows[hangnum].cells[lienum].value != 0)
	{
		var evalue = tab.rows[hangnum].cells[lienum].value;
		tab.rows[hangnum].cells[lienum].innerHTML="<img src='"+evalue+"1.png' ;/>";
		
		if (quanjushu <2)
		{
			
			quanjushuzu[quanjushu][0] = evalue;
			quanjushuzu[quanjushu][1] = hangnum;
			quanjushuzu[quanjushu][2] = lienum;
			
			quanjushu++;
			if(quanjushu ==2)
			{
				if(quanjushuzu[0][0]!=quanjushuzu[1][0])
				{
					
					tab.rows[quanjushuzu[0][1]].cells[quanjushuzu[0][2]].innerHTML="<img src='"+quanjushuzu[0][0]+".png'/>";
					tab.rows[quanjushuzu[1][1]].cells[quanjushuzu[1][2]].innerHTML="<img src='"+quanjushuzu[1][0]+".png' />";
				}
				else
				{
					var panduan0 = lianxian0(evalue);	
					if (!panduan0)
					{
						
						var  panduan1= lianxian1(evalue);
						if(!panduan1)
						{
							//alert("cant!!!!!!!!");
							
						}
					}
					
				}
				
				quanjushu=0;
			}
		}
	}
}
function lianxian0(numvalue)
{
	var tab = document.getElementById("mytab");
	var minnum = 0;
	var x0 = quanjushuzu[0][1];
	var x1 = quanjushuzu[1][1];
	
	var y0 = quanjushuzu[0][2];
	var y1 = quanjushuzu[1][2];
	
	if (x0 == x1 )
	{
		for(minnum = Math.min(y0,y1)+1;minnum < Math.max(y0,y1);minnum++)
		{
			//用来判断这一行是否有障碍
			if(tab.rows[x0].cells[minnum].value !=0)
			{
				
				//用来判断直连是否成功
				break;
				
					
			}	
		}
		if(minnum == Math.max(y0,y1))
			{
				tab.rows[x0].cells[Math.max(y0,y1)].innerHTML="<img src='0.png'/>";
				//要记得消去原有图片给位置标记的值value
				tab.rows[x0].cells[Math.max(y0,y1)].value = 0;
				tab.rows[x0].cells[Math.min(y0,y1)].innerHTML="<img src='0.png'/>";
				tab.rows[x0].cells[Math.min(y0,y1)].value = 0;
			}
		else
		{
			lianxian2(numvalue);
		}
		
	} else if(y0 ==y1 )
	{
		for(minnum = Math.min(x0,x1)+1;minnum < Math.max(x0,x1);minnum++) 
		{
			if(tab.rows[minnum].cells[y0].value !=0)
			{
				
				break;					
			}
		}
		if(minnum == Math.max(x0,x1))
			{
				tab.rows[Math.max(x0,x1)].cells[y0].innerHTML="<img src='0.png'/>";
				tab.rows[Math.max(x0,x1)].cells[y0].value = 0;
				tab.rows[Math.min(x0,x1)].cells[y0].innerHTML="<img src='0.png'/>";
				tab.rows[Math.min(x0,x1)].cells[y0].value = 0;
			}
		else
		{
			lianxian2(numvalue);
		}
	}
	else
	{
		return 0;	
	}
	return 1;
}
function lianxian1(numvalue)
{
	
	var tab = document.getElementById("mytab");
	var minnumx = 0;
	var minnumy = 0;
	var flag = 0;
	var x0 = quanjushuzu[0][1];
	var x1 = quanjushuzu[1][1];
	
	var y0 = quanjushuzu[0][2];
	var y1 = quanjushuzu[1][2];
	
	if(x0 > x1 && y0 < y1)
	{
		
		for(var qingjing = 0; qingjing <2;qingjing++)
		{
			
			if(qingjing ==0)
			{
				//两个循环，第一个循环判断条件是有等
				flagx = 0;
				flagy = 0;
				for(minnumx = x0 -1; minnumx >= x1; minnumx--)
				{
					if(tab.rows[minnumx].cells[y0].value !=0)
					{
						flagx = 1;
						break;
					}
				}
				if(flagx ==0)
				{
						for(minnumy = y0+1; minnumy < y1; minnumy++)
						{
							if(tab.rows[x1].cells[minnumy].value !=0)
							{
								flagy = 1;
								break;
							}	
						}
						if(flagy ==0)
						{
				
							
							tab.rows[x0].cells[y0].innerHTML="<img src='0.png'/>";
							tab.rows[x0].cells[y0].value = 0;
							tab.rows[x1].cells[y1].innerHTML="<img src='0.png'/>";
							tab.rows[x1].cells[y1].value = 0;
							//flag = 1;
							return 1;
						}
				}
					
			}else
			{
				//两个循环，第一个循环判断条件是有等于号的
				flagx =0;
				flagy =0;
				for(minnumy = y0+1; minnumy <= y1; minnumy++)
				{
					if(tab.rows[x0].cells[minnumy].value !=0)
					{
						flagy =1;
						break;
					}
				}
				if(flagy == 0)
				{

						for(minnumx = x0 -1; minnumx >x1; minnumx--)
						{
							if(tab.rows[minnumx].cells[y1].value !=0)
							{
								flagx = 1;
								break;
							}
						}
						if(flagx == 0)
						{
						//alert("x0 > x1 && y0 < y1 2" );
						tab.rows[x0].cells[y0].innerHTML="<img src='0.png'/>";
						tab.rows[x0].cells[y0].value = 0;
						tab.rows[x1].cells[y1].innerHTML="<img src='0.png'/>";
						tab.rows[x1].cells[y1].value = 0;
						//flag = 1;
						return 1;
						}
				}
						
				
			}
		}
		
	}else if(x0 > x1 && y0 > y1)
	{
		//全部重新改************************************************
		for(var qingjing = 0; qingjing <2;qingjing++)
		{
			
			if(qingjing ==0)
			{
				//两个循环，第一个循环判断条件是有等
				flagx = 0;
				flagy = 0;
				for(minnumx = x0 -1; minnumx >= x1; minnumx--)
				{
					if(tab.rows[minnumx].cells[y0].value !=0)
					{
						flagx = 1;
								
						break;
					}
				}
				if (flagx == 0 )
				{
					for(minnumy = y0-1; minnumy > y1; minnumy--)
					{
							
						if(tab.rows[x1].cells[minnumy].value != 0)
						{
								
							flagy = 1;
							break;
						}
							
					}
					if (flagy == 0)
					{
				
					//alert("x0 > x1 && y0 > y1 1");
					tab.rows[x0].cells[y0].innerHTML="<img src='0.png'/>";
					tab.rows[x0].cells[y0].value = 0;
					tab.rows[x1].cells[y1].innerHTML="<img src='0.png'/>";
					tab.rows[x1].cells[y1].value = 0;
					//flag = 1;
					return 1;	
					}
				}
							
				
			}else
			{
				//两个循环，第一个循环判断条件是有等于号的
				flagx =0;
				flagy = 0;
				for(minnumy = y0-1; minnumy >= y1; minnumy--)
				{
					if(tab.rows[x0].cells[minnumy].value !=0)
					{
						flagy = 1;
						break;
					}
				}
					
				if(flagy ==0 )
				{
						for(minnumx = x0 -1; minnumx >x1; minnumx--)
						{
							if(tab.rows[minnumx].cells[y1].value !=0)
							{
								flagx = 1;
								break;
							}
						}
						if(flagx ==0)
						{
							//alert("x0 > x1 && y0 > y1 2");
							tab.rows[x0].cells[y0].innerHTML="<img src='0.png'/>";
							tab.rows[x0].cells[y0].value = 0;
							tab.rows[x1].cells[y1].innerHTML="<img src='0.png'/>";
							tab.rows[x1].cells[y1].value = 0;
							//flag = 1;
							return 1;
						}
				}
				
			}
		}
			
	}else if(x0 < x1 && y0 > y1)
	{
		for(var qingjing = 0; qingjing <2;qingjing++)
		{
			
			if(qingjing ==0)
			{
				//两个循环，第一个循环判断条件是有等
				flagx = 0;
				flagy = 0;
				for(minnumx = x0 +1; minnumx <= x1; minnumx++)
				{
					if(tab.rows[minnumx].cells[y0].value !=0)
					{
						flagx = 1;
						break;
					}
				}
				if(flagx == 0)
				{
						for(minnumy = y0-1; minnumy > y1; minnumy--)
						{
							if(tab.rows[x1].cells[minnumy].value !=0)
							{
								flagy = 1;
								break;
							}
					
						}
						if(flagy == 0)
						{
							//alert('x0 < x1 && y0 > y1 1');
							tab.rows[x0].cells[y0].innerHTML="<img src='0.png'/>";
							tab.rows[x0].cells[y0].value = 0;
							tab.rows[x1].cells[y1].innerHTML="<img src='0.png'/>";
							tab.rows[x1].cells[y1].value = 0;
							flag = 1;
							return 1;
						}
				}
						
			}else
			{
				flagx =0;
				flagy = 0;
				//两个循环，第一个循环判断条件是有等于号的
				for(minnumy = y0-1; minnumy >= y1; minnumy--)
				{
					if(tab.rows[x0].cells[minnumy].value !&
最低0.47元/天 解锁文章
静媛不圆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生JavaScript实现连连看游戏(附源码)
10-26
原生JavaScript版连连看游戏，有源码，适合初学者学习，喜欢的朋友可以研究下
HTML5游戏实战《银行卡牌连连看看游戏》
shenhaijy的博客
06-27 2020
开发平台：http://www.tangide.com/ 游戏：http://www.i5r.com.cn/apprun-qq3AB7703F9C0E830593A4D0829A1D9611711435051680507.html 游戏主要：是实现相同的两张卡牌翻转对比后消除，不同两张的卡牌在翻转回去， 看谁在最短的时间里把所有相同的卡牌找出来。 先建立文件，在拖放图片和编写程序。
html5 连连看小游戏
iteye_19211的博客
07-07 1万+
[color=darkred]首先，html页面为：[/color] 连连看 var _canvas = null; var _canvasCtx=null; var _img=null; var _gameTimer=null; var lineTimer=null; var startTime=null;...
Web游戏 金馆长连连看 基于HTML+CSS+JavaScript
01-29
连连看源码，基于HTML+CSS+JavaScript的web游戏
JavaScript实现连连看游戏
09-16
时间：2013年7月20日-2013年7月24日 游戏介绍：采用HTML（非HTML5）、CSS、JavaScript编写，网页上部为砖块，下部为挡板。开始后球从挡板中间斜向上移动碰撞墙壁和砖块，碰到砖块后砖块消失。通过键盘的左右键移动位于底部的挡板接球。小球击中砖块后有可能下落绿色或黄色魔法棒，挡板移动碰到黄色魔法棒时挡板变短，碰到绿色魔法棒时挡板变长。 作者：张金鹏
使用javascript编写连连看
landuary110的博客
07-28 424
闲来无事，使用javascript编写了一个连连看小游戏，这个游戏相信已经被大家编烂了，但是我还是从自己不同的角度去再次尝试这个游戏，1000个人有1000个哈姆雷特，不说废话 先上效果图   http://duansong.l1.zgsj.net/myprocess/，中有连连看代码（本人的小站，大家可以随意逛一逛，刚开始建设，无耻的广告），ps:连连看代码可以在附近中下载。 其实连连看...
前端原生js实现连连看
jsjs_js的博客
01-08 1529
实现连连看首先清除规则 1.相同图片可以消除，且连接路径最多有2折 2.所有图片都要被消除 首先定义变量，定义数组存放图片就是待消除的图片，以及一个二维数组记录棋盘变化，再定义一个数组记录步骤可以返回上一步 let steps = [];//记录步骤 let lattices = []; //这里为了方便dom操作将棋盘每个格子div都存在这个数组里了也是2维数组 let imgarr = ["./assest/img/hanberger.svg", "./assest/
一个基于html5+jquery实现的连连看小游戏
qqqyxx的博客
06-06 674
一个基于html5+jquery实现的连连看小游戏
Android连连看设计思路,0049 JavaScript游戏连连看设计和编程思路
weixin_29214335的博客
06-02 465
上节课完成了一个算24点的游戏，基本了解了关于使用JavaScript如何编写一个游戏的基本要素。接下来的几节课，来完成更复杂的网页游戏：连连看。要编游戏先得会玩游戏如果没有玩过这个游戏的同学，需要先去尝试玩一下这个游戏，了解游戏的基本规则。打开浏览器，进入网站：3-8-1.jpg然后点击益智类的第一个链接：连连看。3-8-2.jpg然后点击左侧排行第一的“宠物连连看2.5”。3-8-3.jpg然...
HTML5小游戏动手做（一）：简单的连连看
热门推荐
time1812的专栏
03-11 2万+
从本篇起，我将在此展示制作一些HTML5小游戏的过程和经验。本文描述的是一个经典又简单的小游戏，连连看。 1. 计划 1.1 目标 快速建立一个连连看游戏原形。 能玩就行。 1.2 游戏特性介绍 游戏展示一个m * n大小的表格 表格每个格子里面有一个图标/符号 每个图标都是成对出现 玩家需要找到每对匹配的图标/符号 如果玩家选中的两个图标/符号匹配并且其连线转折次数小...
连连看（网页版）
02-28
用网页实现的连连看，感兴趣的看一看吧，绝对满意
原生JavaScript编写canvas版的连连看游戏
10-22
主要为大家详细介绍了原生JavaScript编写连连看游戏的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html+css+JavaScript实现连连看.zip
02-01
连连看一个h5的小游戏
连连看HTML5游戏源码
06-23
连连看HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
基于PureMVC实现的连连看小游戏 完整代码+报告 毕业设计
02-03
todo： 游戏已知bug修复 增加连连看其它算法方式 下面的说明参考完整的博客文章PureMVC（AS3）剖析：实例 首先声明“连连看”游戏并非很适合使用PureMVC框架，因为它本身并不复杂，而且没有需要复用的逻辑代码等。这里通过这样一个不太复杂的小游戏，介绍PureMVC。 需求 《连连看》是一款操作非常简单的小游戏，它的玩法就是用直线将两个相同的图标消掉，分为十关，难度递进。 【概要】玩家可以将 2 个相同图案的对子连接起来，连接线不多于 3 根直线，就可以成功将对子消除。 【操作】第一次使用鼠标点击棋盘中的棋子，该棋子此时为“被选中”，以特殊方式显示；再次以鼠标点击其他棋子，若该棋子与被选中的棋子图案相同，且把第一个棋子到第二个棋子连起来，中间的直线不超过 3 根，则消掉这一对棋子，否则第一颗棋子恢复成未被选中状态，而第二颗棋子变成被选中状态 设计 整个游戏分为2个模块：关卡选择模块、关卡具体模块。关卡选择模块，类似一个菜单呈现10个关卡供玩家选择；关卡具体模块，呈现特定关卡的详细信息，如需要消除的棋子、总时间、重排棋子按钮、获取提示按钮、暂停按钮等等。 关卡数
连连看小游戏（html+css+js）
最新发布
07-21
花费了2个小时的摸鱼时间，我成功地编写了一个精彩的连连看小游戏，让我感到非常开心和满足。这款游戏玩起来相当出色，现在我很高兴地与大家分享。 在这个连连看小游戏的设计过程中，我注重细节和用户体验。通过精心...
HTML5连连看游戏
11-13
　　一款非常不错但能让人瞬间凌乱的三国杀版连连看游戏，设置了提示和排名、计时等功能，代码简单易懂，是一个很不错的游戏开发学习案例。 　　感兴趣的开发者可以下载源码，解压后导入MM开发环境进行修改优化，可跨平台导出apk（Android）和ipa（iOS）包，安装到手机上玩；也可以将该游戏工程文件部署到MM应用引擎，在浏览器查看效果。 　　MM应用引擎部署效果： 　 http://lianlinkan.mmapp.cn/client/www/app.html 　　更多示例代码请进入MM开发环境官网查看下载： 　　http://dev.10086.cn/ude/index.do
连连看web实现，原生js
11-15
原生js实现精简版本连连看
基于java+swing+gui的连连看游戏
05-16
基于Java Swing GUI的连连看游戏是一款具有良好用户体验和可玩性的益智游戏。这个游戏的主要特点是使用了Java Swing GUI框架和相关技术来实现，具有灵活易用性，方便开发者进行二次开发和定制。 在这个游戏中，玩家需要寻找和连接相同图案的两个图标，并在规定时间内完成所有的配对。游戏场景有多种主题可供选择，例如水果、动物、蔬菜等等，还可以根据玩家的需要进行自定义。 在实现这个游戏时，我们需要充分利用Java Swing GUI框架和相关技术，如JFrame、JPanel、JButton等，来实现游戏界面的构建和交互逻辑。同时，我们还需要使用适当的算法来生成游戏中的图形，并确保每一局游戏都具有足够的难度和挑战性，以保持游戏的吸引力和乐趣性。 总之，基于Java Swing GUI的连连看游戏是一款优秀的益智游戏，具有良好的用户体验和可玩性，适合广大玩家在休闲时间中进行娱乐和放松。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值