Image Puzzle GameIn this Tutorial, we are going to create an image puzzle, which Almost everyone, at one point during childhood, has played jigsaw puzzles. Today I am going to show you how to create a jigsaw image puzzle using jQuery and HTML5. I know that you must be waiting to see the puzzle in action. I am not going to keep you guessing. Here is the sample demo of the puzzle and download of tutorial files.

Step by Step Walkthrough:

Html Document:

Do add all the images of same width on which you want to make Puzzle and link them in a zigzac manner under a Div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="puzzle" style="width: 450px">
<img id="image_1" src="img/puzzle1.jpg" alt="" style="position: relative; ">
<img id="image_5" src="img/puzzle5.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_7" src="img/puzzle7.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_9" src="img/puzzle9.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_8" src="img/puzzle8.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_4" src="img/puzzle4.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_2" src="img/puzzle2.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_6" src="img/puzzle6.jpg" alt="" style="position: relative; z-index: 0; left: 0px; top: 0px; " width="150">
<img id="image_3" src="img/puzzle3.jpg" alt="" style="position: relative; "></div>
<p>
<span id="puzzleinfo">(no move made yet)</span>
</p>
</div>

Don’t forget to include javascript links in the head section.The main play is done by these js files.

1
2
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>

Javascript Flow:

Using this function, it first creates the puzzled images and makes them ready, when sorting of images is done it counts all the moves and when the images are properly sorted according to the sequence then it notifies the result with the count of moves done.

1
2
3
4
5
6
7
8
9
10
11
12
13
(function()
{
  var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
  
  Sortable.create('puzzle', {
    tag:'img',overlap:'horizontal',constraint: false,
    onUpdate:function(){
      info.update('You've made ' + (++moves) + ' move' + (moves>1 ? 's' : ''));
      if(Sortable.sequence('puzzle').join('')=='123456789')
         info.update('You've solved the puzzle in ' + moves + ' moves!').morph('congrats');
    }
  });
})();

Conclusion

I hope this tutorial can give you some insight how to make puzzled images. And we’re done! As a quick note,will move forward and extend this.

Reference: technotz

Leave a Reply

Your email address will not be published. Required fields are marked *