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培训机构，这使得学员在前端开发方面也能得到强化训练。通过这样的...