Tutorials‎ > ‎

How to make puzzle using phonegap + Jquery

posted Dec 22, 2011, 11:15 PM by Eripin _   [ updated Aug 15, 2016, 11:30 PM by Surya Wang ]

There are several techiques that we need to make this puzzle. I divided it into 4 steps. There are :
  1. Crop Image
  2. Make The puzzle
  3. Shuffle Image
  4. Solve puzzle
First, we need to take picture that we want to become our object puzzle. It can be from capture new photo or from photo library. We can create that menu in our application using PhoneGap API References. But in this tutorial, we will focus on creating the puzzle.

1. Crop Image After we had the picture, we need to crop the image. The technique that is used in this tutorial to crop image is using combination of background-image and image. This tutorial uses background image to display image in different appearance, and by setting different background position, we can crop image as we want. Example code :



2. Make The puzzle To make the puzzle we use looping on our image. Then we change the value of background-position and margin. So, from 1 image, we looping the image to the number we want. Then, we crop the image to the size we want, and by changing the value of background-position we get different piece of image. Example code for random the value :

This will give the value for hasilRandom variable from 0-8. We will use this number later to random the pieces of puzzle we have. Example code to get random pieces positions :


So, with this we get the positions for pieces filled with random value. Then, we need to declare the value for puzzle width and height. Example code :


After that, we need to make the puzzle pieces by looping the value and keep changing the value for background-position and margin so we get full image with different position for each pieces. Example code :



So, by changing the value for b_x, b_y, m_x, and m_y, we get different image display, and by doing the random value, we get different result.


3. Shuffle Image What we do when we shuffle the image are changing the margin value for the exchanged puzzle piece, changing the id that we create before and change the property value for each piece. In this tutorial, we shuffle the image according to user click, the first image that is clicked will exchange the second image that is clicked. Example code :



For the first clicked, there is a change on the opacity on the element. It’s just for user to remember what he/she already click.


4. Solve Puzzle To win the game, user needs to make the image back its to normal position by swap the puzzle around. If the user already win, give some notification to let the user realize that he/she already has finished the game. In the code, we need to make some flag to check winning condition for user. In this tutorial, first, we store the value we use to random the image. Then, every time the image being swap, we checked if the image is already same with the first image. It’s sound easy with the logic, but we need to be more careful with the code because the value we set for the image id must be also swapped when we swap the image. Example code to check winning condition :

If the user win, this program will give alert notification “Congratz, you win !“