我把大小限制在了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="https://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> 大小:<input/> <button>初始化</button> <button>刷新</button> </div> <div> </div> </body> </html>