jQuery人物圖片拼圖遊戲程式碼

這是一款簡單好玩的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>