js實(shí)現(xiàn)簡(jiǎn)單拼圖小游戲

更新時(shí)間：2021年08月13日 09:42:36 作者：weixin_43978685

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單拼圖小游戲的具體代碼，供大家參考，具體內(nèi)容如下

游戲很簡(jiǎn)單，拼拼圖，鼠標(biāo)拖動(dòng)一塊去和另一塊互換。語(yǔ)言是HTML+js，注釋寫(xiě)的有不明白的可以留言問(wèn)一下。

截圖

代碼區(qū)

<!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給每個(gè)div添加不同的圖片；即9個(gè)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>
 //完成兩個(gè)圖片拖拽后的互換;
  function over(e){
   e.preventDefault();//阻止默認(rèn)
  }
  //抓起
  function drag(e){
   var id=e.target.id;
   // console.log(e.target.id);
   e.dataTransfer.setData("id",id);//設(shè)置傳輸?shù)氖潜蛔d；
  }
  //經(jīng)過(guò)
  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);//獲取被抓對(duì)象;
   var fang=document.getElementById(fangID);//獲取放的對(duì)象；
   var f_beizhua=beizhua.parentNode;//分別找到對(duì)應(yīng)的父節(jié)點(diǎn)
   var f_fang=fang.parentNode;
   //互換兒子
   f_beizhua.appendChild(fang);
   f_fang.appendChild(beizhua);
   win();
   }
   //判斷贏得方法；每個(gè)父和子id名字序號(hào)相同，循環(huán) ,累加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!");
    }
    
   }
   //打亂按鈕；通過(guò)生成隨機(jī)數(shù)；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>