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>

结语

东西很少，逻辑也不算强，但是思路需要清晰。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧