JQuery拼图

最新推荐文章于 2024-02-21 18:21:26 发布

王柏柘

最新推荐文章于 2024-02-21 18:21:26 发布

阅读量294

点赞数 1

本文链接：https://blog.csdn.net/qq_35840740/article/details/78980890

版权

<!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" />
<link rel="stylesheet" href="jquery-ui-1.10.1.custom/css/ui-lightness/jquery-ui-1.10.1.custom.min.css" />

#biaotou{
margin-left: 50px;
display: block;
}
#yinchangnandu{
display:none;
}
#yuantu{
width:600px;
height:400px;
position:absolute;
display:none;
}
#guize{
margin-left:200px;
}
</style>
<body>
<div id="biaotou">
    <input type="button" value="重新开始" id="btn">
    <select id="xuanze">
        <option value="1">请选择段位</option>
    </select>
    <select id="xuanze2">
        <option value="1">请选择段位</option>
    </select>
    <input type="button" id="yinchang" value="隐藏难度"/>
    <select id="yinchangnandu">
        <option value="1">隐藏1</option>
        <option value="2">隐藏2</option>
        <option value="3">隐藏3</option>
    </select>
    <input type="button" id="chakanyuantu" value="chakanyuantu"/>
</div>
<div id="tu">
</div>
<div id="yuantu">
</div>
<div id="guize">
过关要求:<div id="yaoqiu"></div>
点击数：<div id="dianjishu"></div>
时间：<div id="shijian"></div>
积分：<div id="jifen"></div>
</div>
</body>
<script>
var dianjishu=0;
var shijian=0;
var jifen=0;
var tuichang=600;
var tukuan=400;
var bianchang=$("#xuanze").val();
var tuinhtml="";
var length=bianchang*bianchang;
var chang=600/bianchang;
var kuan=400/bianchang;
var width=kuan+"px";
var heigth=chang+"px";
var beijingurl;
var border;
var shuzua,shuzub,shuzuc;
var beijing;
//查看原图
$("#chakanyuantu").click(function(){
  //图片url
  if($("#yuantu").css("display")=="block"){
   if(beijingurl==$("#yuantu").css("background-image")){
   $("#yuantu").css("display","none");
   }else{
   $("#yuantu").css("background-image",beijingurl);
   }
  }else{
   $("#yuantu").css("display","block");
   if(typeof(beijingurl)=="undefined"){
    return alert("请先选择等级！");
   }
   var s=$("#tu").offset();

   $("#yuantu").css("background-image",beijingurl);
   $("#yuantu").offset({left:s.left+620,top:s.top});
  }
  })
//设置难度
$("#xuanze").change(function(){
   bianchang=$("#xuanze").val();
   beijingurl="url(img"+bianchang+"/p1.jpg)";
   length=bianchang*bianchang;
   chang=600/bianchang;
   kuan=400/bianchang;
   width=kuan+"px";
   heigth=chang+"px";
   border=8/(bianchang+1)+"px solid #DBE6E1";
   tuinhtml="";
  for(var i=1;i<=length;i++){
   tuinhtml+="<div id='tu"+i+"'οnclick='dianji(this)'>"+i+"</div>";
  }
   jiazai(tuinhtml);
});
//切换二级难度
$("#xuanze2").change(function(){
  var num=$("#xuanze2").val();
  beijingurl="url(img"+bianchang+"/p"+num+".jpg)";
  length=bianchang*bianchang;
   chang=600/bianchang;
   kuan=400/bianchang;
   width=kuan+"px";
   heigth=chang+"px";
   border=8/(bianchang+1)+"px solid #DBE6E1";
   tuinhtml="";
  for(var i=1;i<=length;i++){
   tuinhtml+="<div id='tu"+i+"'οnclick='dianji(this)'>"+i+"</div>";
  }
   jiazai(tuinhtml);

})
//开启隐藏难度
$("#yinchang").click(function(){
  if(parseInt($("#xuanze").val())<5){
   alert("高中一下不能开启！");
  }else{
   if($("#yinchangnandu").css("display")=="none"){
    $("#yinchangnandu").css("display","inline-block");
    var yinchangzhi=$("#yinchangnandu").val();
    shuzub=shengchengsuijishu(yinchangzhi,length-1);
    alert(shuzub[0]);
   }else{
    $("#yinchangnandu").css("display","none");
   }
  }
})
//改变隐藏难度
$("#yinchangnandu").change(function(){
  var yinchangzhi=$("#yinchangnandu").val();
  do{
   shuzub=shengchengsuijishu(yinchangzhi,length-1);
  }while(!yanzhengshuzu(shuzub));

})
//生成难度数组b
function shengchengshuzub(){
  do{
   shuzub=shengchengsuijishu(yinchangzhi,length-1);
  }while(yanzhengshuzu(shuzub));

}
//验证数组b（b不能为4个角相邻的两个）
function yanzhengshuzu(shuzub){
  for(var i=0;i<shuzub.length;i++){
   if(shuzub[i]==2){
    for(var j=0;j<shuzub.length;j++){
     if(shuzub[j]==(length+1)){
     return false;
     }
    }
   }
   if(shuzub[i]==(length-1)){
    for(var j=0;j<shuzub.length;j++){
     if(shuzub[j]==(length-bianchang-1)){
     return false;
     }
    }
   }
   if(shuzub[i]==(bianchang-1)){
    for(var j=0;j<shuzub.length;j++){
     if(shuzub[j]==(bianchang*2)){
     return false;
     }
    }
   }
   if(shuzub[i]==(length-bianchang+1)){
    for(var j=0;j<shuzub.length;j++){
     if(shuzub[j]==(length-bianchang*2+1)){
     return false;
     }
    }
   }
  }
  return true;
}
//加载tu
function jiazai(tuinhtml){
  $("#tu").html(tuinhtml);
  $("#tu>div").each(function(){
   border=8/(bianchang+1)+"px solid #DBE6E1";
   var num=parseInt($(this).attr("id").substring(2,4));
   $(this).css({"height":width,"width":heigth,"border":border,"background-image":beijingurl});
   bgdingwei(this,num);
   })
  if($("#yinchangnandu").css("display")=="inline-block"){

   $("#tu>div").each(function(){
     var num=parseInt($(this).attr("id").substring(2,4));
     for(var j=0;j<shuzub.length;j++){
      if(num==shuzub[j]){
       var biankuangxian=8/(bianchang+1)+"px solid green";;
       if($(this).next().size()>=1&&num%bianchang!=0){
        $(this).next().css({"border-left":biankuangxian});
        }
        if($(this).prev().size()>=1&&num%bianchang!=1){
        $(this).prev().css("border-right",biankuangxian);
        }
        if($(this).nextAll().size()>=bianchang){
         $(this).nextAll().eq(bianchang-1).css("border-top",biankuangxian);
        }
        if($(this).prevAll().size()>=bianchang){
         $(this).prevAll().eq(bianchang-1).css("border-bottom",biankuangxian);
        }
       border=8/(bianchang+1)+"px double #000000";

       $(this).css({"height":width,"width":heigth,"border":border});

      }
     }
    })
   }

}
//点击开始事件
$("#btn").on("click",function(){

   kaishi();
  });
  //
  function kaishi(){
   var tuinhtml2="";
   shuzua=shengchengsuijishu(length,length);

   if(typeof(shuzub)!="undefined"){

    shuzuc=shengchengsuijishu2(length,shuzub);
    var aaaaa="";
    for(i=0;i<shuzuc.length;i++){
     aaaaa+=shuzuc[i]+" ";
    }
    for(i=0;i<length;i++){
     tuinhtml2+="<div id='tu"+shuzuc[i]+"' οnclick='dianji(this)'>"+shuzuc[i]+"</div>";
    }
   }else{

    for(i=0;i<length;i++){
     tuinhtml2+="<div id='tu"+shuzua[i]+"' οnclick='dianji(this)'>"+shuzua[i]+"</div>";
    }
   }
   jiazai(tuinhtml2);
  }
  //生成1个1-length的随机不重复n长度数组
  function shengchengsuijishu(n,length){
   var a=new Array(n);
   var c="";
   a[0]=Math.ceil(Math.random()*length);
   for(var i=1;i<n;i++){

    do{
     b=Math.ceil(Math.random()*length);
    }while(yanzheng(i,b,a));
    a[i]=b;
   }
   return a;
  }
  //验证数组a中是否存在与b相同的数
   function yanzheng(i,b,a){
    for(var j=0;j<i;j++){
     if(b==a[j]){
      return true;
     }
    }
    return false;
   }
  //生成一个固定c各个数字位置的1-length的随机不重复n长度数组
  function shengchengsuijishu2(n,c){
   var a=new Array(n);
   for(var j=0;j<c.length;j++){
     a[c[j]-1]=c[j];
   }

   for(i=0;i<n;i++){
    if(a[i]>0){
     continue;
    }
    do{
     b=Math.ceil(Math.random()*length);
    }while(yanzheng2(b,a,n));
    a[i]=b;
   }


    return a;
  }
  function yanzheng2(b,a,n){
    for(j=0;j<n;j++){
    if(b==a[j]){
     return true;
    }
   }
   return false;
  }

  //点击图片事件
  function dianji(e){
   var pan1=0,pan2=0,pan3=0,pan4=0;
   var num=parseInt($(e).attr("id").substring(2,4));
   if($(e).next().size()>=1){
    pan1=parseInt($(e).next().attr("id").substring(2,4));

    }
    if($(e).prev().size()>=1){
     pan2=parseInt($(e).prev().attr("id").substring(2,4));
    }
    if($(e).nextAll().size()>=bianchang){
      pan3=parseInt($(e).nextAll().eq(bianchang-1).attr("id").substring(2,4));
    }
    if($(e).prevAll().size()>=bianchang){
      pan4=parseInt($(e).prevAll().eq(bianchang-1).attr("id").substring(2,4));
    }

   if(pan4==length||pan1==length||pan2==length||pan3==length){
    if(typeof(shuzub)!="undefined"){
     for(var j=0;j<shuzub.length;j++){
      if(shuzub[j]==num){
       if(pan1==length||pan2==length){
        return $(e).effect("pulsate",null,500,$(e).show());
       }else{
        return $(e).effect("pulsate",null,500,$(e).show());
       }
      }
     }
    }
     $(this).hide();
     qiehuan(e);

   }
   var yanzhenghtml=1;
   $("#tu>div").each(function(index, element) {
                if(parseInt($(this).attr("id").substring(2,4))==yanzhenghtml){
     yanzhenghtml+=1;
    }
            });
   if(yanzhenghtml==(length+1)){
    x=-(bianchang-1)*chang;
    y=-(num/bianchang-1)*kuan;
    var position=x+"px "+y+"px";
    $("#tu"+length).css({"background-position":position});
    alert("恭喜你拼图成功!");
   }
}
//切换e与空白div
function qiehuan(e){
  dianjishu+=1;
  var thistu=parseInt($(e).attr("id").substring(2,4));
  var lengthstu=parseInt($("#tu"+length).attr("id").substring(2,4));
    bgdingwei("#tu"+length,thistu);
    bgdingwei(e,lengthstu);
    //切换html
    var thishtml=$(e).html();
    var lengthhtml=$("#tu"+length).html();
    $("#tu"+length).html(thishtml);
    $(e).html(lengthhtml);

    //切换id属性
    var idlength=$("#tu"+length).attr("id");
    var idthis=$(e).attr("id");

    $("#tu"+length).attr("id",idthis);
    $(e).attr("id",idlength);
}

//定位置
function dingwei(e,num){
  var left,top;
  if(num%bianchang!=0){
   left=(num%bianchang-1)*chang+10;
   top=parseInt(num/bianchang)*kuan+40;

  }else{
   left=chang*4+10;
   top=parseInt(num/bianchang-1)*kuan+40;
  }
   $(e).css({"top":top,"left":left});
}
//定背景图
function bgdingwei(e,num){
  var x,y;
  if((num%bianchang)!=0){
   x=-((num%bianchang-1)*chang);
   y=-parseInt(num/bianchang)*kuan;
  }else{
   x=-(bianchang-1)*chang;
   y=-(num/bianchang-1)*kuan;
  }
   var position=x+"px "+y+"px";
  if(num!=length)
  {
   $(e).css({"background-position":position});
       }else{
   $(e).css({"background-position":"400px,400px","background-color":"#FFFFFF"});

  }
  if(length==1){
   $(e).css({"background-position":"0px,0px"});
  }
}
//级联
var $pro=new Array("小学","初中","高中","大学","硕士","博士");
var $ct=[
['小学1年纪','小学2年纪','小学3年纪','小学4年纪','小学5年纪',"小学6年纪"],
['初1','初2','初3'],
['高1','高2','高3'],
['大学1','大学2','大学3','大学4'],
['硕士1','硕士2'],
['博士'],
];
$(function(){
for(var i=0;i<$pro.length;i++){
    $("#xuanze").append($("<option value='"+(i+3)+"'>"+$pro[i]+"</option>"));
}
$("#xuanze").change(function(){
  var index1=$(this).val();
  $("#xuanze2").get(0).options.length=0;
  if(index1!=0){
   index1=parseInt(index1)-1;
   for(var i=0;i<$ct[(index1-2)].length;i++){

   $("#xuanze2").append($("<option value='"+(i+1)+"'>"+$ct[index1-2][i]+"</option>"));
   }
  }else{
   $("#xuanze2").append($("<option value='0'>---段位---</option>"));
  }
});
});
</script>
</html>

百度云链接：https://pan.baidu.com/s/1dFpnum9 密码：hd50

王柏柘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery拼图

无标题文档body{ background-image:url(background/710654%5B1%5D.jpg); background-repeat:no-repeat;}#tu div{ float:left; background-image:url(img3/p1.jpg); background-repeat:no-repeat;
复制链接

扫一扫