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游戏的一起研究一下。
分享到:
相关推荐
在本文中,我们将深入探讨一个纯JavaScript实现的连连看游戏源码,了解其设计原理和实现细节,帮助你提升JavaScript编程技能,尤其是对于游戏开发的理解。 首先,这个游戏的亮点在于它完全依赖于JavaScript,没有...
在IT领域,JavaScript(简称JS)是一种广泛应用于网页和网络应用开发的脚本语言,尤其在前端开发中占据着核心地位。"js 版的连连看3个"这个项目涉及到了使用JavaScript实现连连看游戏的代码。连连看,又称为对对碰,...
HTML5是超文本标记语言(HTML)的第五次重大修订,它引入了许多新的特性和功能,极大地增强了网页的交互性、动态性和多媒体...通过分析和研究源码,不仅可以了解游戏的实现原理,还能提升自己在Web开发领域的技能。
本篇将深入解析“奇葩连连看”这款基于HTML5的游戏源码,旨在帮助读者了解HTML5游戏开发的基本原理和技术栈。 首先,我们来探讨HTML5在游戏开发中的核心应用。HTML5提供了Canvas元素,这是一个用于图形绘制的画布,...
通过分析这个游戏的源码,我们可以深入理解H5游戏的开发原理和技巧。 源码结构通常包含以下几个部分: 1. HTML文件:这是游戏的主页面,包含了游戏界面的布局和元素。在开心连连看中,HTML文件会定义游戏面板、...
本篇文章将围绕“水果连连看源代码”进行深入探讨,帮助大家了解其背后的技术原理和实现方法。 首先,我们来看“WelActivity”这个文件名,它很可能代表游戏的欢迎界面或主活动(Activity)类。在Android应用开发中...
在这个游戏中,Canvas元素作为绘图的画布,开发者可以直接在JavaScript中进行像素级别的图形绘制和动画处理,实现了连连看游戏所需的图像显示和用户交互功能。 Canvas API允许开发者通过JavaScript代码动态绘制图形...
通过学习和分析《海贼王连连看》的游戏源码,开发者不仅可以掌握连连看游戏的实现细节,还能进一步了解游戏开发的基本流程和技巧,这对于想要进入游戏开发领域的程序员来说是一次宝贵的学习机会。同时,这样的小型...
在这个基于Java Web技术的课程设计中,我们将深入探讨连连看游戏的设计原理和实现过程,同时涵盖游戏规则、界面设计、功能实现以及用户交互等多个方面。 1. 游戏规则 连连看的核心规则在于寻找并消除一对对相同的...
在JavaScript编程领域中,"js记忆翻牌连连看游戏特效代码"是一个有趣且具有挑战性的实践项目,旨在...通过分析和理解这段代码,开发者不仅可以学习到如何创建互动游戏,还能深入理解JavaScript在实际应用中的工作原理。
三、连连看游戏原理与实现 连连看游戏的核心机制是寻找并消除一对对相同的图案。在“win8 metro 连连看”中,玩家通过点击同一颜色且相邻的两个图案进行消除。游戏的挑战在于限制的操作步数和时间,玩家需要策略性...
总的来说,通过对这个Silverlight连连看游戏源码的分析,我们可以了解到Silverlight的编程模型,游戏开发的基本流程,以及如何将二者结合以实现一个完整的游戏应用。无论是初学者还是经验丰富的开发者,都能从中获得...
通过分析《连连看》的源码,我们可以学习到如何用HTML、CSS和JavaScript构建一个完整的互动游戏,这对于初学者来说是一次很好的实践机会。此外,对于有经验的开发者,这也提供了一个优化和扩展游戏功能的基础,例如...
HTML5微信小游戏“奇葩连连看”是一款基于网页技术开发的休闲益智类游戏,源码的分享对于开发者来说是一份宝贵的资源,可以帮助他们学习和理解HTML5游戏开发的基本原理和技巧。下面,我们将深入探讨这款小游戏所涉及...
12. **版本控制**:源码可能使用Git等版本控制系统管理,便于多人协作和历史版本追踪。 通过分析这个源码,开发者可以学习到游戏开发的基本流程,包括游戏规则的实现、用户交互的设计、性能调优等多方面的知识。...
源码分析可以帮助学习者了解游戏的实现原理,包括游戏逻辑、界面布局、事件监听、数据管理等方面。通过对源码的研究,开发者可以学习如何构建类似的HTML5游戏,或者进行二次开发,增加新的功能和特性。 7. 社交...
- **JavaScript框架**:为了实现游戏逻辑,开发人员可能会使用像jQuery、React或Vue.js这样的JavaScript框架,它们能简化DOM操作,提高性能。 - **微信小游戏开发**:微信平台提供了小游戏开发工具,开发者需要了解...
本文将深入探讨这个小游戏的实现原理和关键技术。 首先,我们关注的是游戏的核心逻辑——方块的消除。在JavaScript中,这通常涉及到数组的操作和比较。当用户点击一个方块时,程序会检查与其相邻的方块是否满足消除...
- 开发连连看游戏,锻炼JavaScript编程能力。 此外,课程还强调了JQuery和CSS的精讲,这是Java EE开发中不可或缺的前端技术。 **总结** "惠业JAVA EE+3G"课程是一个全面的Java企业级开发学习计划,涵盖了从基础到...
惠业人才服务基地强调基础的重要性,通过代码级分析和讲解,让学员能够深入理解并应用这些技术。此外,他们也是省内唯一精讲JQuery和CSS的Java EE培训机构,这使得学员在前端开发方面也能得到强化训练。通过这样的...