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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
PuzzleImg - Script to Create Image Puzzle Game

Last accessed pages

  1. Common PHP Errors and Solutions (6867)
  2. Get visitor IP in PHP (842)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (43359)
  4. SSEP - Site Search Engine PHP-Ajax (7095)
  5. PHP Method Chaining (1706)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (697)
  2. Read Excel file data in PHP - PhpExcelReader (625)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (394)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (347)
  5. PHP getElementById and getElementsByTagName (311)