js實現簡單拼圖小遊戲

本文實例為大傢分享瞭js實現簡單拼圖小遊戲的具體代碼,供大傢參考,具體內容如下

遊戲很簡單,拼拼圖,鼠標拖動一塊去和另一塊互換。語言是HTML+js,註釋寫的有不明白的可以留言問一下。

截圖

代碼區

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <style type="text/css">
  div{
   width: 200px;
   height: 200px;
   
  }
  .tu{
   background-image:url(anni.jpg);
   }
  //利用background-position給每個div添加不同的圖片;即9個div組成一幅完成的圖片;
  #z-1{
   background-position: 0px 0px;
  }
  #z-2{
   background-position:-200px 0px;
  }
  #z-3{
   background-position:-400px 0px;
  }
  #z-4{
   background-position:0 -200px;
  }
  #z-5{
   background-position: -200px -200px;
  }
  #z-6{
   background-position: -400px -200px;
  }
  #z-7{
   background-position: 0px -400px;
  }
  #z-8{
   background-position: -200px -400px;
  }
  #z-9{
   background-position: -400px -400px;
  }
 </style>
 <script>
 //完成兩個圖片拖拽後的互換;
  function over(e){
   e.preventDefault();//阻止默認
  }
  //抓起
  function drag(e){
   var id=e.target.id;
   // console.log(e.target.id);
   e.dataTransfer.setData("id",id);//設置傳輸的是被抓id;
  }
  //經過
  function drop(e){
   var beizhuaId=e.dataTransfer.getData("id");//接受被抓id;
   // console.log(beizhuaId);//被抓ID
   var fangID=e.target.id;//所放位置的id;
   var beizhua=document.getElementById(beizhuaId);//獲取被抓對象;
   var fang=document.getElementById(fangID);//獲取放的對象;
   var f_beizhua=beizhua.parentNode;//分別找到對應的父節點
   var f_fang=fang.parentNode;
   //互換兒子
   f_beizhua.appendChild(fang);
   f_fang.appendChild(beizhua);
   win();
   }
   //判斷贏得方法;每個父和子id名字序號相同,循環 ,累加count;
   function win(){
    var tus=document.getElementsByClassName('tu');
    var count=0;
    for(var i=0;i<tus.length;i++){
     var tu=tus[i];
     var fu=tu.parentNode;
     var tu_id=tu.getAttribute("id");
     var fu_id=fu.getAttribute("id");
     if(tu_id.replace("z-","")==fu_id.replace("f-","")){
      count++;
      console.log(count);
     }else{
      return;
     }
    }
    
    if(count==9){
     alert("you win!");
    }
    
   }
   //打亂按鈕;通過生成隨機數;appenChild方法去多次互換,則為打亂;
   function daluan(){
    for(var i=0;i<100;i++){
    var tus=document.getElementsByClassName('tu');
    var m=parseInt(Math.random()*9);
    var n=parseInt(Math.random()*9);
    var tusmp=tus[m].parentNode;
    var tusnp=tus[n].parentNode;
    tusmp.appendChild(tus[n]);
    tusnp.appendChild(tus[m]);
    }
   }
 </script>
 <body>
  <table border="1">
   <tr>
    <td>
     <div id="f-1" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-1" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
    <td>
     <div id="f-2" ondragover="over(event)" ondrop="drop(event)">
      <div  id="z-2" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
    <td>
     <div id="f-3" ondragover="over(event)" ondrop="drop(event)">
      <div  id="z-3" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div id="f-4" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-4" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
    <td>
     <div id="f-5" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-5" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
    <td>
     <div id="f-6" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-6"  class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div id="f-7" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-7"  class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
    <td>
     <div id="f-8" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-8" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
    <td>
     <div id="f-9" ondragover="over(event)" ondrop="drop(event)">
      <div id="z-9" class="tu" draggable="true" ondragstart="drag(event)"></div>
     </div>
    </td>
   </tr>

  </table>
  <input type="button" value="打亂" onclick="daluan()" />
 </body>
</html>

結語

東西很少,邏輯也不算強,但是思路需要清晰。

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: