js to realize a simple puzzle game

This article shares the specific code of js to implement a simple puzzle game for your reference. The specific content is as follows

The game is very simple, you just need to put the puzzle together and drag one piece with the mouse to swap it with another. The language is HTML+js. If you don't understand the comments, you can leave a message to ask.

screenshot

Code Area

<!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);
   }
  //Use background-position to add different pictures to each div; that is, 9 divs form a complete picture;
  #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>
 //Complete the swap of two pictures after dragging;
  function over(e){
   e.preventDefault(); //Prevent default}
  //Grab function drag(e){
   var id=e.target.id;
   // console.log(e.target.id);
   e.dataTransfer.setData("id",id);//Set the captured id to be transmitted;
  }
  //After function drop(e){
   var beizhuaId=e.dataTransfer.getData("id");//Accept the captured id;
   // console.log(beizhuaId); // ID of the person arrested
   var fangID=e.target.id;//the id of the location;
   var beizhua=document.getElementById(beizhuaId);//Get the captured object;
   var fang=document.getElementById(fangID);//Get the object to be released;
   var f_beizhua=beizhua.parentNode;//Find the corresponding parent nodes var f_fang=fang.parentNode;
   //Exchange sonsf_beizhua.appendChild(fang);
   f_fang.appendChild(beizhua);
   win();
   }
   //How to judge the winning method; each parent and child id name has the same serial number, loop, accumulate 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!");
    }
    
   }
   //Scramble button; generate random numbers; use the appenChild method to swap multiple times, which is a scramble;
   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="Shuffle" onclick="daluan()" />
 </body>
</html>

Conclusion

There is very little content and the logic is not very strong, but the ideas need to be clear.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js+canvas realizes the function of sliding puzzle verification code
JS realizes three effects of PC mobile terminal and embedded sliding puzzle verification code
js realizes the nine-square puzzle game
JS quickly implements mobile jigsaw puzzle games
JS jigsaw puzzle game object-oriented, fully commented.
js+html5 realizes a jigsaw puzzle game that can be played on mobile phones
Digital puzzle game code written in JS [learning reference]
JS implements a complete example of sliding puzzle verification function
Sample code for simulating the operation of sliding puzzle verification code using Node.js
Picture puzzle memory test game, web + JS version

<<: How to shut down/restart/start nginx

>>: Detailed explanation of common usage of MySQL query conditions