PuzzleImg is a JavaScript script that can be used to create very easy simple image puzzle games. With this script you can convert existing images in webpage into puzzles, and also you can create puzzle game with an image from external address.

- To download the script and examples, click this link: JavaScript Image Puzzle (352 KB).

For questions or problems related to this script, please write on Forum.

Example - Convert images into puzzle

• Click on the button to convert the images into puzzles.

Spring Dream

Spring Dream

Tree

Tree

Example - Create puzzle with image from external location

Here will be added the canvas with the JavaScript puzzle game.
Image address:

Usage

1. Download the script and copy the puzzleimg.css and puzzleimg.js files on your server.
2. Include the "puzzleimg.css" and "puzzleimg.js" in your webpage by adding this code in the <head> section:
<link rel="stylesheet" href="puzzleimg.css" />
<script src="puzzleimg.js"></script>
3a. If you want to create a puzzle with an image from an external location, add this code in the place where you want to show the puzzle:
<div id="div_id" class="puzelm">Here it is added the canvas with the puzzle.</div>
<script>
var puz1 = new PuzzleImg('div_id', 'location/image.png', 5, 4, 600, 450);
</script>
- The first argument of the PuzzleImg() is the ID of the Div where the puzzle will be added ('div_id').
- The second argument is the image address ('location/image.png').
- The third and fourth arguments represents the number of Columns and Rows with the image tiles in puzzle (5, 4).
- The last two arguments are optional (600, 450), they represents the canvas Width and Height. If these arguments are not added, the canvas will have the size of the image.
- The Div that will contain the canvas with the puzzle must have: class="puzelm".
- If you want to define a function that will be called when the puzzle is completed, assign it to the solved property. Also, you can use the clicks property to get the number of clicks
Example:
var puz1 = new PuzzleImg('div_id', 'location/image.png', 5, 4, 600, 450);
puz1.solved = function(){
  alert('Solved in '+ puz1.clicks +' clicks.');
}
3b. If you want to convert images in webpage into puzzle game, just add this code to the end of the html document:
<script>
imgToPuzzle('CSS Selector', 3, 4, 0, callback);
</script>
- The first argument of the imgToPuzzle() is the css selector that matches the images you want to convert into puzzle (examples: '#id_img', or 'div .class_imgs').
- The second and third arguments represents the number of Columns and Rows with the image tiles in puzzle (3, 4).
- If the fourth argument (here 0) has the value 0, the script will not show the button that solves the puzzle. To show that button, set value 1.
- The callback argument is optional, and represents a function that will be called when the puzzle is completed.

Other Specifications

The puzzle is created into a <canvas> element, and adds a mini-thumbnail to can preview the image, and a html button to auto solve the puzzle.
The Div that contains the image-puzzle has class: "puzelm".
The canvas element has class: "puzcnv".
The mini-thumbnail image has class: "puzimg".
The button to solve the puzzle has class: "puzsolve".

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
PuzzleImg - Script to Create Image Puzzle Game

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (1419)
  2. Golf Putt It In (739)
  3. Disable button and Enable it after specified time (5129)
  4. Flash Games - Free online Games (22975)
  5. Move image from an element /tag to another (1637)

Popular pages this month

  1. Qwop (3219)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2547)
  3. Get the value of the selected /checked checkboxes in a form (1608)
  4. Insert, Select and Update NULL value in MySQL (1423)
  5. Add, Change, and Remove Attributes with jQuery (1301)