How to make puzzle using phonegap + Jquery

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 :

crop code

printscr app 1

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 :

code

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 :

code

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 :

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 :

code

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.

print scr app 2

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 :

shuffle

shuffle
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.

print src app 3

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 :

solve

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

print scr app 4

You can download the full source code on here

Posted on October 20, 2011, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: