這篇文章主要介紹了jQuery制作可自定義大小的拼圖游戲的代碼，非常的簡單實用，雖然還只是局限於數字順序的拼圖，後續慢慢完善上圖片，但還是分享給大家，有需要的小伙伴可以參考下。
我把大小限制在了3-10之間，實在閒的，或者有自虐傾向的可以試試改下。。
本來准備弄圖片上去的，還沒弄..
pintu.html
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 <!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>以上就是本文給大家分享的全部內容了，希望大家能夠喜歡。