Thank you for purchasing my game. If you have any questions, please feel free to contact me here.
newFlash fallback for IE 6, 7, 8
First put the
puzzle.php in the server root and create a list of puzzles somewhere in your site.
Every item in the list contains a thumbnail and a link to the puzzle page with a parameter (image) that point to the large version of the image.
Then change the default image at the end of the
This image will be used if no one is provided.
Congratulations: You have Canvas Puzzle installed.
Below is an example with all available options and their defaults values:
So you want to create a contest and save the scores in your database? just specify a url to redirect when the puzzle is complete:
you will receive two POST parameters:
Use these to rank the players.
So you want to save the score of your users in a database?, just remove the class
"hide" from the form in the congratulation section:
Ask the player for their username, email or whatever you want. When the form is submitted you will receive one POST parameter:
time: Time required to complete the puzzle in ISO 8601 format (hh:mm:ss).
The game use the following HTML structure, you may want to change the Congratulation and Help sections.
To add a new button insert a link inside a
li tag at the end of game options section:
There are two CSS files.
style.css contains all of the specific stylings for the app. The file is separated into sections using:
/*== Jigsaw puzzle ==*/ /*== Options bar ==*/ /*== Clock ==*/ /*== Select ==*/ /*== Share buttons ==*/ /*== Modal window ==*/
Note: You may want to change the
div.modal rule at the Modal Window section.
buttons.css file specifies the appearance of the buttons.
To initialize the app just create an instance of
jigsaw.Jigsaw() after the DOM is ready. You can also specify an object with some options.
Canvas puzzle now comes ready to translate into any language. inside the folder
locale you can find the template
messages.pot which you can use to translate the game to your idiom
locale/messages.pot(File > New catalog from POT file)
es_ES/LC_MESSAGES/messages.po, you can find a list of locale abbreviations here.
After you finish translating the template you should edit the file
include/translate.php and change the code at line 2:
To create a list of puzzle with thumbnails you can use the file
include/puzzle-list.php, just include this file where you want to create the puzzle list as in the following example
Note: to use this script you need GD2.
this will generate a
html as the following:
I've used the following code: