js to realize a simple puzzle game

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

Recommend

How to compile and install xdebug in Ubuntu environment

This article describes how to compile and install...

Mysql GTID Mha configuration method

Gtid + Mha + Binlog server configuration: 1: Test...

An article to understand the creation, uploading, pulling and deployment of Docker images

Table of contents 1. Images 1. What is a mirror? ...

Example code for using Nginx to implement 301 redirect to https root domain name

Based on SEO and security considerations, a 301 r...

How to deploy stand-alone Pulsar and clustered Redis using Docker (development artifact)

Table of contents 1. Introduction: 2. Docker: 1 C...

How to modify the default encoding of mysql in Linux

During the development process, if garbled charac...

Use of Linux file command

1. Command Introduction The file command is used ...

Detailed explanation of the difference between uniapp and vue

Table of contents 1. Simple page example 2.uni-ap...

Vue implements the sample code of associating the side navigation bar with the Tab page

Table of contents Technology Stack Effect analyze...

Docker's health detection mechanism

For containers, the simplest health check is the ...

Steps to transplant the new kernel to the Linux system

1. Download the ubuntu16.04 image and the corresp...

Example of JSON output in HTML format (test interface)

To display the JSON data in a beautiful indented ...

How to perfectly implement the grid layout with intervals on the page

Typical layout examples As shown in the above pic...

Reduce memory and CPU usage by optimizing web pages

Some web pages may not look large but may be very ...

Example code of CSS layout at both ends (using parent's negative margin)

Recently, during the development process, I encou...