PuzzleImg - Script to Create Image Puzzle Game

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

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".

<<-Horizontal-Vertical Menu with Arrow .. -- MPGal - Simple Image ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag can be used to create input text field in web page?

<input type="text" name="a_name" value="val" />

Which CSS property displays the text in a small-caps font?

display font-variant font-style

h3 {
  font-variant: small-caps;
}

What instruction displays a notice box with a message inside it, in JavaScript?

for() Date() alert()

var msg = "Visit CoursesWeb.net";
alert(msg);

Indicate the PHP code used to get the users IP.

$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]

$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;