Dynamic Drive DHTML Scripts- DHTML puzzle script!

Dynamicdrive.com

New

|

Hot

FAQ

.

Home DHTML Games 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

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):

<script language=javascript src=dynlayer.js></script> <script language=javascript src=mixup.js></script> <script> /* DHTML puzzle script (By Davey Erwin, daverwin@hotmail.com, http://daverwin.homepage.com/) Modified slightly/ permission granted to Dynamic Drive to feature script in archive For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ //1) Specify whether puzzle should be rendered in NS 4. // "0" disables it (for use when you wish to place the puzzle inside table) var display_in_NS=1 //2) Configure second and third parameter below for puzzle image/size //Make width and height divisible by 3 myPuz=new Puzzle('myPuz','http://dynamicdrive.com/dynamicindex14/photo2.jpg',141,255) //3) Specify how many line breaks should appear after puzzle (for spacing purposes) //Pertains only to NS var linebreaks=14 writeCSS(myPuz.css) if (document.layers) { widthCheck = window.innerWidth heightCheck = window.innerHeight window.onResize = resizeFix} function resizeFix() { if (widthCheck != window.innerWidth || heightCheck != window.innerHeight) document.location.href = document.location.href} function DavInit(){ DynLayerInit()} if (document.all||(document.layers&&display_in_NS==1)) window.onload=DavInit </script> <script> if (document.all) document.write(myPuz.div) else if (document.layers&&display_in_NS==1){ document.write(myPuz.div) for (spacer=0;spacer<=linebreaks;spacer++) document.write('<br>') } </script>

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