Javascript Course

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 include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
PuzzleImg - Script to Create Image Puzzle Game

Last accessed pages

  1. Get Attribute (ID, Class, Name, Title, Src) with jQuery (72833)
  2. Node.js Course (2313)
  3. PHP Unzipper - Extract Zip, Rar Archives (25132)
  4. Ajax-PHP Rating Stars Script (16324)
  5. Select in MySQL, Output results in HTML Table (18481)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (690)
  2. SHA256 Encrypt hash in JavaScript (425)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (412)
  4. SHA1 Encrypt data in JavaScript (381)
  5. Read Excel file data in PHP - PhpExcelReader (305)