大佬教程收集整理的这篇文章主要介绍了jQuery制作可自定义大小的拼图游戏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。 本来准备弄图片上去的，还没弄..
pintu.html
<script src="http://code.jquery.com/jquery-latest.js">
<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,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<=widthheight-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<=widthheight-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=widthheight-1;
var pp=$("#pt_main");
pp.html('');
//创建并初始化
var k=widthsize+border_wwidth2;
var g=heightsize+border_wheight2;
pp.css({'width':k,'height':g});
for(i=0;i<widthheight;i++){
var n=$("
}
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=widthwidthwidth;
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();
}