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

js to realize a simple puzzle game

screenshot

Code Area

Conclusion

CSS uses BEM naming convention practice

Detailed explanation of vue keepAlive cache clearing problem case

Complete code for implementing the vue backtop component

A brief discussion on VUE uni-app's commonly used APIs

Detailed tutorial on installing Mysql5.7.19 on Centos7 under Linux

The difference and usage of Vue2 and Vue3 brother component communication bus

An article to understand the usage of typeof in js

A detailed tutorial on how to install Jenkins on Docker for beginners

Detailed process of NTP server configuration under Linux

jQuery achieves the shutter effect (using li positioning)

Recommend

Detailed explanation of nginx optimization in high concurrency scenarios

MySQL DATE_ADD and ADDDATE functions add a specified time interval to a date

About nginx to implement jira reverse proxy

html a link tag title attribute line break mouse hover prompt content line break effect

SQL method for calculating timestamp difference

Web Design Experience

How to implement Linux automatic shutdown when the battery is low

jQuery implements nested tab function

VMware Workstation Pro 16 License Key with Usage Tutorial

Implementation of single process control of Linux C background service program

Detailed explanation of obtaining, assigning, and registering radio values in HTML

Nginx routing forwarding and reverse proxy location configuration implementation

Solution to the problem that the InnoDB engine is disabled when MySQL is started

10 Tips for Mobile App User Interface Design

IDEA configuration process of Docker