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

Use CSS3 to implement button hover flash dynamic special effects code

We have introduced how to create a waterfall layo...

mysql method to recursively search for all child nodes of a menu node

background There is a requirement in the project ...

Solve the problem of installing Theano on Ubuntu 19

Solution: Directly in the directory where you dow...

Mysql method to copy a column of data in one table to a column in another table

mysql copy one table column to another table Some...

js+css to realize three-level navigation menu

This article example shares the specific code of ...

HTML table tag tutorial (44): table header tag

<br />In order to clearly distinguish the ta...

Introduction to basic concepts and technologies used in Web development

Today, this article introduces some basic concept...

Function overloading in TypeScript

Table of contents 1. Function signature 2. Functi...

JavaScript implementation of the back to top button example

This article shares the specific code for JavaScr...

Detailed explanation of vuex persistence in practical application of vue

Table of contents vuex persistence Summarize vuex...

A small introduction to the use of position in HTML

I just learned some html yesterday, and I couldn&#...

MySQL learning database operation DML detailed explanation for beginners

Table of contents 1. Insert statement 1.1 Insert ...

Detailed explanation of several clever applications of position:sticky sticky positioning

Background: position: sticky is also called stick...

A brief discussion on the invalidation or implicit conversion of MySQL integer and string indexes

Table of contents Problem Overview Problem Reprod...

Tips for Mixing OR and AND in SQL Statements

Today, there is such a requirement. If the logged...