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