jQuery人物图片拼图游戏代码

js代码

<script type=\"text/javascript\">
 $(function(){
  var tt=null;
 	// 游戏完成时间和步数
 var times=0;
 var time=0;
 // 打乱之前的图片数组准备加油
 var src= Array();
   	src.push(\"images/201.png\");
   	src.push(\"images/202.png\");
    src.push(\"images/203.png\");
    src.push(\"images/204.png\");
    src.push(\"images/205.png\");
    src.push(\"images/206.png\");
    src.push(\"images/207.png\");
    src.push(\"images/208.png\");
    src.push(\"images/209.png\");
    // 按钮事件加油。。。开始游戏
 
    $(\'#button\').click(function(){
      clearInterval(tt)
  // 时间归0
       time=0;
       times=0;
       // 来来来设置时间；了
       tt=setInterval(shij,1000)
       function shij(){
        time++;
        $(\".time>p>span\").text(time)
       }
       	// 乱序排列
        var srcUsing= new Array();
	         for(var p=0; p<src.length;p++){
	         	srcUsing[p]=src[p];
	         }
          var newArry= new Array();
          for(var i=0;i< $(\"#box img\").length;i++){
             newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
           }    
          for(var j=0;j<newArry.length;j++){
            $(\"#box img\").eq(j).attr(\"src\",String(newArry[j]));
          }     

       // 设置一个空白图片，
       var Arrps=document.getElementById(\"box\").getElementsByTagName(\"img\");
       for(var i=0;i<Arrps.length;i++){
          Arrps[i].onclick=function(){
          if (this.getAttribute(\"src\")==\"images/201.png\");
          changeP(this,Arrps);
         };
       }
       })
   
     
     // 判断位置
    function changeP(ob,Arrps){
           var Ni=0;
           var Nj=0;

          for(var i=0;i<Arrps.length;i++){
           if(Arrps[i]==ob)
           {
           	// alert(ob)
            Ni=i;
           }
            
          if(Arrps[i].getAttribute(\"src\")==\"images/201.png\")
          {
          	Nj=i;
          }
            
           }
            // 绝对值
           if(Math.abs(Ni-Nj)==3)
           {
              var temperOb=ob.getAttribute(\"src\"); 
              ob.setAttribute(\"src\",\"images/201.png\");
              Arrps[Nj].setAttribute(\"src\",temperOb);
              times++;
              ifright();
               
             }else if((Ni-Nj)==1&&(Ni%3)!=0){
             var temperOb=ob.getAttribute(\"src\"); 
              ob.setAttribute(\"src\",\"images/201.png\");
              Arrps[Nj].setAttribute(\"src\",temperOb);
              times++;
              ifright();
               
             }else if((Ni-Nj)==-1&&(Ni%3)!=2){
              var temperOb=ob.getAttribute(\"src\"); 
              ob.setAttribute(\"src\",\"images/201.png\");
              Arrps[Nj].setAttribute(\"src\",temperOb);
              times++;
              ifright();
             } 
              $(\".bu>p>span\").text(times) 
          }
           
          function ifright(){
            var ps=document.getElementById(\"box\");
            var Arrps=ps.getElementsByTagName(\"img\");
             for(var i=0;i<src.length;i++){
              if(src[i]!=Arrps[i].getAttribute(\"src\")) return;
             }
             alert(\"恭喜，你成功了。。\"+\"\\n\"+\"用了\"+times+\"步\")
          }
 })
 
</script>