“Canvas Puzzle” Documentation by “sney2002” v2.0

“Canvas Puzzle”

Thank you for purchasing my game. If you have any questions, please feel free to contact me here.

Table of Contents

  1. Getting Started
  2. Available options
  3. Redirect to another page
  4. Saving score
  5. HTML Structure
  6. CSS Files and Structure
  7. JavaScript
  8. Translating canvas puzzle
  9. Create a list of puzzles
  10. Sources and Credits

Features - top

A) Getting started - top

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 puzzle.php file.

This image will be used if no one is provided.

Congratulations: You have Canvas Puzzle installed.

B) Available options - top

Below is an example with all available options and their defaults values:

C) Redirect to another page - top

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.

D) Saving score - top

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:

E) HTML Structure - top

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:

F) CSS Files and Structure - top

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.

The buttons.css file specifies the appearance of the buttons.

.

G) JavaScript - top

This game imports three Javascript files.

  1. canvas-event-js: javascript library that add events to the canvas element.
  2. EventEmmiter: javascript library to listen and emit custom events.
  3. canvas-puzzle: The Puzzle game.
  4. flashcanvas.js: for compatibility with IE < 9

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.

H) Translating Canvas Puzzle - top

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

  1. Download and install poedit.
  2. Start Poedit and open the file locale/messages.pot (File > New catalog from POT file)



  3. Fill the necessary parameters



  4. After you click OK, you’ll be asked to save the new PO file created from the template. Save it as the corresponding locale, say language = spanish (es) and Country = Spain (ES) then the path will be /es_ES/LC_MESSAGES/messages.po, you can find a list of locale abbreviations here.



  5. Now you can start to translate the po file



  6. After finish just save the file (File > Save)

After you finish translating the template you should edit the file include/translate.php and change the code at line 2:

I) Create a list of puzzles - top

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:

J) Sources and Credits - top

I've used the following code:

Jhonatan Salguero

Go To Table of Contents