`
李俊良
  • 浏览: 146033 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

纯js版本网页连连看原理分析和实现

阅读更多

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游戏的一起研究一下。

1
1
分享到:
评论

相关推荐

    js 连连看游戏源码

    在本文中,我们将深入探讨一个纯JavaScript实现的连连看游戏源码,了解其设计原理和实现细节,帮助你提升JavaScript编程技能,尤其是对于游戏开发的理解。 首先,这个游戏的亮点在于它完全依赖于JavaScript,没有...

    js 版的连连看3个

    在IT领域,JavaScript(简称JS)是一种广泛应用于网页和网络应用开发的脚本语言,尤其在前端开发中占据着核心地位。"js 版的连连看3个"这个项目涉及到了使用JavaScript实现连连看游戏的代码。连连看,又称为对对碰,...

    趣味连连看HTML5游戏源码

    HTML5是超文本标记语言(HTML)的第五次重大修订,它引入了许多新的特性和功能,极大地增强了网页的交互性、动态性和多媒体...通过分析和研究源码,不仅可以了解游戏的实现原理,还能提升自己在Web开发领域的技能。

    奇葩连连看HTML5游戏源码

    本篇将深入解析“奇葩连连看”这款基于HTML5的游戏源码,旨在帮助读者了解HTML5游戏开发的基本原理和技术栈。 首先,我们来探讨HTML5在游戏开发中的核心应用。HTML5提供了Canvas元素,这是一个用于图形绘制的画布,...

    开心连连看H5小游戏源码

    通过分析这个游戏的源码,我们可以深入理解H5游戏的开发原理和技巧。 源码结构通常包含以下几个部分: 1. HTML文件:这是游戏的主页面,包含了游戏界面的布局和元素。在开心连连看中,HTML文件会定义游戏面板、...

    水果连连看源代码

    本篇文章将围绕“水果连连看源代码”进行深入探讨,帮助大家了解其背后的技术原理和实现方法。 首先,我们来看“WelActivity”这个文件名,它很可能代表游戏的欢迎界面或主活动(Activity)类。在Android应用开发中...

    三国人物连连看小游戏.zip

    在这个游戏中,Canvas元素作为绘图的画布,开发者可以直接在JavaScript中进行像素级别的图形绘制和动画处理,实现了连连看游戏所需的图像显示和用户交互功能。 Canvas API允许开发者通过JavaScript代码动态绘制图形...

    海贼王连连看

    通过学习和分析《海贼王连连看》的游戏源码,开发者不仅可以掌握连连看游戏的实现细节,还能进一步了解游戏开发的基本流程和技巧,这对于想要进入游戏开发领域的程序员来说是一次宝贵的学习机会。同时,这样的小型...

    连连看游戏(报告书)

    在这个基于Java Web技术的课程设计中,我们将深入探讨连连看游戏的设计原理和实现过程,同时涵盖游戏规则、界面设计、功能实现以及用户交互等多个方面。 1. 游戏规则 连连看的核心规则在于寻找并消除一对对相同的...

    js记忆翻牌连连看游戏特效代码

    在JavaScript编程领域中,"js记忆翻牌连连看游戏特效代码"是一个有趣且具有挑战性的实践项目,旨在...通过分析和理解这段代码,开发者不仅可以学习到如何创建互动游戏,还能深入理解JavaScript在实际应用中的工作原理。

    win8 metro 连连看

    三、连连看游戏原理与实现 连连看游戏的核心机制是寻找并消除一对对相同的图案。在“win8 metro 连连看”中,玩家通过点击同一颜色且相邻的两个图案进行消除。游戏的挑战在于限制的操作步数和时间,玩家需要策略性...

    Silverlight连连看游戏源码

    总的来说,通过对这个Silverlight连连看游戏源码的分析,我们可以了解到Silverlight的编程模型,游戏开发的基本流程,以及如何将二者结合以实现一个完整的游戏应用。无论是初学者还是经验丰富的开发者,都能从中获得...

    连连看.zip

    通过分析《连连看》的源码,我们可以学习到如何用HTML、CSS和JavaScript构建一个完整的互动游戏,这对于初学者来说是一次很好的实践机会。此外,对于有经验的开发者,这也提供了一个优化和扩展游戏功能的基础,例如...

    html5微信小游戏-奇葩连连看游戏源码.zip

    HTML5微信小游戏“奇葩连连看”是一款基于网页技术开发的休闲益智类游戏,源码的分享对于开发者来说是一份宝贵的资源,可以帮助他们学习和理解HTML5游戏开发的基本原理和技巧。下面,我们将深入探讨这款小游戏所涉及...

    小游戏源码-麻将连连看.rar

    12. **版本控制**:源码可能使用Git等版本控制系统管理,便于多人协作和历史版本追踪。 通过分析这个源码,开发者可以学习到游戏开发的基本流程,包括游戏规则的实现、用户交互的设计、性能调优等多方面的知识。...

    微信HTML5在线朋友圈游戏源码带安装部署教程-奇葩连连看.zip

    源码分析可以帮助学习者了解游戏的实现原理,包括游戏逻辑、界面布局、事件监听、数据管理等方面。通过对源码的研究,开发者可以学习如何构建类似的HTML5游戏,或者进行二次开发,增加新的功能和特性。 7. 社交...

    微信HTML5在线朋友圈游戏源码带安装部署教程-旋转消消乐.rar

    - **JavaScript框架**:为了实现游戏逻辑,开发人员可能会使用像jQuery、React或Vue.js这样的JavaScript框架,它们能简化DOM操作,提高性能。 - **微信小游戏开发**:微信平台提供了小游戏开发工具,开发者需要了解...

    jQuery消除方块小游戏源码.zip

    本文将深入探讨这个小游戏的实现原理和关键技术。 首先,我们关注的是游戏的核心逻辑——方块的消除。在JavaScript中,这通常涉及到数组的操作和比较。当用户点击一个方块时,程序会检查与其相邻的方块是否满足消除...

    惠业JAVA EE+3G.docx

    - 开发连连看游戏,锻炼JavaScript编程能力。 此外,课程还强调了JQuery和CSS的精讲,这是Java EE开发中不可或缺的前端技术。 **总结** "惠业JAVA EE+3G"课程是一个全面的Java企业级开发学习计划,涵盖了从基础到...

    惠业JAVA EE+3G.pdf

    惠业人才服务基地强调基础的重要性,通过代码级分析和讲解,让学员能够深入理解并应用这些技术。此外,他们也是省内唯一精讲JQuery和CSS的Java EE培训机构,这使得学员在前端开发方面也能得到强化训练。通过这样的...

Global site tag (gtag.js) - Google Analytics