| 标题 | jQuery制作可自定义大小的拼图游戏 |
| 范文 | 这篇文章主要介绍了jQuery制作可自定义大小的拼图游戏的代码，非常的简单实用，虽然还只是局限于数字顺序的拼图，后续慢慢完善上图片，但还是分享给大家，有需要的小伙伴可以参考下。 我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。 本来准备弄图片上去的，还没弄.. pintu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拼图</title> <style type="text/css"> #pt_main{ margin:0 auto; border:2px solid #000;} #menu{ text-align:center;} #pt_main div{ padding:0px; margin:0px; float:left; line-height:200px; font-size:100px; text-align:center;} #pt_main div:hover{ cursor:pointer;} .hui{ background:#CCC;} </style> <script src="> <script type="text/javascript"> //div边框宽度 var border_w=2; //div大小 var size=50; //是否过关 var st=false; //背景图片地址（功能还没写） var imgurl=''; //灰色块的位置 var hui=0; //游戏宽高 var width=3; var height=3; $(function(){ init(); }); //判断两个数字能不能交换 function ut_jh(a,b){ if(Math.abs(a-b)==width){ return true; } if(Math.abs(a-b)==1&& ut_line(a,b,width) ){ return true; } return false; } //判断两个数字是否在同一行 function ut_line(a,b,width){ if(parseInt(a/width)==parseInt(b/width)){ return true; }else{ return false; } } //生成可交换的集合（可与灰色块交换的集合） function ut_sc(a){ //最多为4个 var li=new Array(); var i=0; if(a-width>=0){ li[i++]=a-width; } if(a+width<=width*height-1){ li[i++]=a+width; } if(ut_line(a,a-1,width) && a-1>=0){ li[i++]=a-1; } if(ut_line(a,a+1,width) && a+1<=width*height-1){ li[i++]=a+1; } //alert(a+'-length:'+li.length) return li; } //块的点击事件 function pt_click(){ if(!st){ return false; } //点击块的索引 var index=get().index($(this)); if(ut_jh(hui,index)){ jh(hui,index); //判断是否过关 pd(); } } //两块交换 function jh(hui_,index_){ //alert(hui+1+","+(index_+1)); var list=get();//所有块 var h=list.eq(hui_);//灰色块 var d=list.eq(index_);//点击的块 //交换样式 h.removeClass(); d.addClass('hui'); h.html(d.html()); d.html(''); hui=index_; //交换各自属性 tg=h.attr('tg'); h.attr('tg',d.attr('tg')); d.attr('tg',tg); } function init(){ //不能太小... if(width<3||height<3){ return false; } hui=width*height-1; var pp=$("#pt_main"); pp.html(''); //创建并初始化 var k=width*size+border_w*width*2; var g=height*size+border_w*height*2; pp.css({'width':k,'height':g}); for(i=0;i<width*height;i++){ var n=$("<div>"+(i+1)+"</div>"); n.css({'width':size, 'height':size, border:border_w+'px solid #000', lineHeight:size+'px', fontSize:parseInt(size/3)+'px' }); if(imgurl!=''){ } pp.append(n); //alert(i) } get().last().html(''); get().last().addClass('hui'); get().on('click',pt_click); //为每个块附加属性，记录当前的值 $("#pt_main div").each(function(index, element) { $(element).attr('tg',index); }); dl(); st=true; } //判断是否通过(当每个块的值与自身的下标对应) function pd(){ var b=true; get().each(function(index, element) { if($(element).attr('tg')!=index){ b=false; return false; } }); if(b){ st=false; alert("恭喜过关！"); return true; }else{ return false; } } //获取集合 function get(){ return $("#pt_main div"); } //打乱 function dl(){ //打乱次数 var count=width*width*width; for(i =0;i<count;i++){ //可交换集合 var li=ut_sc(hui); var num=parseInt((li.length)*Math.random()); jh(hui,li[num]); } } //初始化按钮的点击事件 function csh(){ var dxv=$('#dx').val(); if(!parseInt(dxv)){ alert('请输入3-10之间的数字'); $('#dx').val(''); return false; } var v=parseInt(dxv); if(v<3||v>10){ alert('请输入3-10之间的数字'); $('#dx').val(''); return false; } width=v; height=v; init(); } </script> </head> <body> <div id='menu'> 大小:<input id='dx'/> <button onclick="csh()">初始化</button> <button onclick="init()">刷新</button> </div> <div id="pt_main"> </div> </body> </html> 以上就是本文给大家分享的全部内容了，希望大家能够喜欢。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。