Dynamic Drive DHTML code library!
Dynamicdrive.com


.

Home Small4.gif (1046 bytes) DHTML Games Small4.gif (1046 bytes) Here

DHTML puzzle script! All

Credits
Name: Davey Erwin
Homepage: Homepage
Note: Script based on DHTML routines from Dynamic Duo/ Script modified slightly by DD for adjustments

Description: Use this fabulous game script to instantly turn any image into a 3x3 puzzle! Simply specify an image, and the script automatically cuts 9 moveable pieces out of it for your users (or yourself!) to interact and sharpen their wits with. Comes with auto "Scramble" and "Solve" ability.

IMPORTANT: Be sure to read "Technical Notes" below for vital information regarding this script and its use

Demo: (move your mouse over a piece adjacent to the blank one to move it)


Directions Developer's View

Step 1: Download the following two .js files, and upload to your webpage directory (by clicking it, or clicking it with the "Shift" key depressed for NS):

-dynlayer.js
-mixup.js

Step 2: Insert the following code where you wish the puzzle to appear on the page (IMPORTANT: view footnote below for valid locations):


Configure three lines inside the code above, as specified in the comments.

Technical Notes (MUST READ)

Due to the complexity of this script, certain limitations exists in terms of configuration and displaying of it. Please read and follow ALL of the points below:

1) First and foremost, for Netscape's sake, this script must be placed outside any tables. That is why this page's layout is void of them, unlike all other pages on Dynamic Drive. The only workaround is to disable the puzzle in Netscape, which you can do by toggling a variable inside code of Step 2.

2) The script asks for the dimensions of the puzzle image. When you specify this information, adjust the numbers slightly so the width and height is divisible by 3. This is so the script can evenly cut out 3 columns and rows from it.

As an example, the actual width and height of the image above is 140px by 225px. However, we inputted 141px by 225px instead (so the width is divisible by 3 as well).

3) This script accesses the BODY onload event (window.onload). If you have another script on your page that does the same, one of them will not run. Click here for information on getting both scripts to work simultaneously.

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6


Copyright 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference