纯js版本网页连连看原理分析跟实现
日期：2014-05-16 浏览次数：20388 次
纯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下
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
