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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
PuzzleImg - Script to Create Image Puzzle Game

Last accessed pages

  1. Sending data with GET and POST in the same request (3603)
  2. Node.js Move and Copy file (3518)
  3. Get the value of the selected /checked checkboxes in a form (37630)
  4. Read Excel file data in PHP - PhpExcelReader (56711)
  5. Get and Modify content of an Iframe (12777)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (448)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)