Post
Ask Question

Puzzle Game Using jQuery



Introduction

This is a simple puzzle game developed using pure HTML and jQuery. This puzzle consists of an image which is divided into fifteen small parts or we could call them segments. These parts are randomly arranged on the puzzle board. Your task isthat you have to rearrange the image segments in proper order. There are no limitations for moves or time; you can take your own time to complete this puzzle.

Background

This puzzle game is mainly based on swapping of divs on puzzle board, Puzzle board consist s of a total of 16 small divs, 15 image divs and one empty div. Div position is set on the puzzle board on random basis. When you click on any div adjacent to the empty div position of selected div and empty div gets changed.

Check Live Demo here.

Code

To swap clicked square and the current empty square, I have written the below function which will swap the position of these divs or segments using left and top co-ordinates.

  1.    
  2. function Move(clicked_square, square_size) {    
  3.         var ismovable = false;    
  4.      
  5.         // Swap x/y between the clicked square and the currently empty square    
  6.         var oldx = $('#board').children("div:nth-child(" + EmptySquare + ")").css('left');    
  7.         var oldy = $('#board').children("div:nth-child(" + EmptySquare + ")").css('top');    
  8.      
  9.         var newx = $(clicked_square).css('left');    
  10.         var newy = $(clicked_square).css('top');    
  11.       
  12.         // The clicked square is north of the empty square    
  13.         if (oldx == newx && newy == (parseInt(oldy) - square_size) + 'px')    
  14.             ismovable = true;    
  15.       
  16.         // The clicked square is south of the empty square    
  17.         if (oldx == newx && newy == (parseInt(oldy) + square_size) + 'px')    
  18.             ismovable = true;    
  19.       
  20.         // The clicked square is west of the empty square    
  21.         if ((parseInt(oldx) - square_size) + 'px' == newx && newy == oldy)    
  22.             ismovable = true;    
  23.       
  24.         // The clicked square is east of the empty square    
  25.         if ((parseInt(oldx) + square_size) + 'px' == newx && newy == oldy)    
  26.             ismovable = true;    
  27.       
  28.         if (ismovable) {    
  29.             // Increment zindex so the new tile is always on top of all others    
  30.             $(clicked_square).css('z-index', zi++);    
  31.       
  32.             // Swap squares... Animate new square into old square position    
  33.             $(clicked_square).animate({ left: oldx, top: oldy }, 200, function() {    
  34.                 //Move old square into new square position    
  35.                 $('#board').children("div:nth-child(" + EmptySquare + ")").css('left', newx);    
  36.                 $('#board').children("div:nth-child(" + EmptySquare + ")").css('top', newy);    
  37.             });    
  38.         }    
  39.     }   
HTML page code is below :
  1. <html>  
  2.   
  3.     <head>  
  4.         <title>jQuery Puzzle Game Demo</title>  
  5.         <link href="main.css" rel="stylesheet" type="text/css" />  
  6.         <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  7.         <script src="main.js"></script>  
  8.     </head>  
  9.   
  10.     <body>  
  11.         <div id="PuzzleDiv" style="border:1px solid black">  
  12.             <div id="board"></div>  
  13.         </div> <input id="button" type="button" value="Start Again"></input>  
  14.         <script>  
  15.         $('#button').click(function ()  
  16.         {  
  17.             $("#board").randomize();  
  18.         });  
  19.         </script>  
  20.     </body>  
  21.   
  22. </html>  
CSS used for this puzzle:
  1. #game_object {    
  2.     background-color: #ffffff;   
  3. }    
  4. #PuzzleDiv {    
  5.     position:fixed;    
  6.     top: 15%;    
  7.     left: 35%;    
  8.     height: 403px;    
  9.     width: 403px;    
  10.     padding:2px;    
  11. }  
I hope you enjoyed reading this article. So keep reading and don’t forget to post your valuable feedback. 


Similar Articles