jQuery制作可自定义大小的拼图游戏

时间：2021-05-26

我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。
本来准备弄图片上去的，还没弄..

pintu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///jquery-latest.js"></script><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' style="text-align:center;width:40px;"/> <button onclick="csh()">初始化</button> <button onclick="init()">刷新</button></div><div id="pt_main"> </div> </body></html>

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章