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

我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。
本来准备弄图片上去的，还没弄..
pintu.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><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="http://code.jquery.com/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>
以上就是本文给大家分享的全部内容了，希望大家能够喜欢。