jQuery制作可自定义大小的拼图游戏
我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。
本来准备弄图片上去的，还没弄..
pintu.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>拼图</title>
<styletype="text/css">
#pt_main{
margin:0auto;
border:2pxsolid#000;}
#menu{
text-align:center;}
#pt_maindiv{
padding:0px;
margin:0px;
float:left;
line-height:200px;
font-size:100px;
text-align:center;}
#pt_maindiv:hover{
cursor:pointer;}
.hui{
background:#CCC;}
</style>
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
<scripttype="text/javascript">
//div边框宽度
varborder_w=2;
//div大小
varsize=50;
//是否过关
varst=false;
//背景图片地址（功能还没写）
varimgurl='';
//灰色块的位置
varhui=0;
//游戏宽高
varwidth=3;
varheight=3;
$(function(){
init();
});
//判断两个数字能不能交换
functionut_jh(a,b){
if(Math.abs(a-b)==width){
returntrue;
}
if(Math.abs(a-b)==1&&ut_line(a,b,width)){
returntrue;
}
returnfalse;
}
//判断两个数字是否在同一行
functionut_line(a,b,width){
if(parseInt(a/width)==parseInt(b/width)){
returntrue;
}else{
returnfalse;
}
}
//生成可交换的集合（可与灰色块交换的集合）
functionut_sc(a){
//最多为4个
varli=newArray();
vari=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)
returnli;
}
//块的点击事件
functionpt_click(){
if(!st){
returnfalse;
}
//点击块的索引
varindex=get().index($(this));
if(ut_jh(hui,index)){
jh(hui,index);
//判断是否过关
pd();
}
}
//两块交换
functionjh(hui_,index_){
//alert(hui+1+","+(index_+1));
varlist=get();//所有块
varh=list.eq(hui_);//灰色块
vard=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);
}
functioninit(){
//不能太小...
if(width<3||height<3){
returnfalse;
}
hui=width*height-1;
varpp=$("#pt_main");
pp.html('');
//创建并初始化
vark=width*size+border_w*width*2;
varg=height*size+border_w*height*2;
pp.css({'width':k,'height':g});
for(i=0;i<width*height;i++){
varn=$("<div>"+(i+1)+"</div>");
n.css({'width':size,
'height':size,
border:border_w+'pxsolid#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_maindiv").each(function(index,element){
$(element).attr('tg',index);
});
dl();
st=true;
}
//判断是否通过(当每个块的值与自身的下标对应)
functionpd(){
varb=true;
get().each(function(index,element){
if($(element).attr('tg')!=index){
b=false;
returnfalse;
}
});
if(b){
st=false;
alert("恭喜过关！");
returntrue;
}else{
returnfalse;
}
}
//获取集合
functionget(){
return$("#pt_maindiv");
}
//打乱
functiondl(){
//打乱次数
varcount=width*width*width;
for(i=0;i<count;i++){
//可交换集合
varli=ut_sc(hui);
varnum=parseInt((li.length)*Math.random());
jh(hui,li[num]);
}
}
//初始化按钮的点击事件
functioncsh(){
vardxv=$('#dx').val();
if(!parseInt(dxv)){
alert('请输入3-10之间的数字');
$('#dx').val('');
returnfalse;
}
varv=parseInt(dxv);
if(v<3||v>10){
alert('请输入3-10之间的数字');
$('#dx').val('');
returnfalse;
}
width=v;
height=v;
init();
}
</script>
</head>
<body>
<divid='menu'>
大小:<inputid='dx'style="text-align:center;width:40px;"/>
<buttononclick="csh()">初始化</button>
<buttononclick="init()">刷新</button>
</div>
<divid="pt_main">
</div>
</body>
</html>
以上就是本文给大家分享的全部内容了，希望大家能够喜欢。