| home / experts / dhtml / column9 |  
|
| ||||||||||||||||||||||
This tutorial can be appreciated by users of any browser, any version. The in-line puzzle will only work in Internet Explorer 4, Release, for Windows 95. The Macintosh Release Version does not support the CSS "clip" property, on which much of the puzzle is based.
A Netscape Navigator 4 version will follow in our next column.Our puzzle example uses art works by M.C. Escher, an artist whose brilliant pieces are puzzles onto themselves.
All M.C. Escher works (c) Cordon Art B.V.-Baarn-the Netherlands.
All rights reserved. Used by permission.
In our last column, "The DHTML Lab Jigsaw Puzzle, Part I", we discussed basic concepts, created our puzzle elements and learned how to break and disperse the puzzle pieces. In this column, which is a direct continuation, we will complete the tutorial by learning how to write routines that will solve the puzzle.
For your reference and time-killing pleasure, the complete puzzle is reproduced below. All the code used can be found on the final three pages of the column. Refer to it as we move along. It will help you grasp "the big picture".
Drag the puzzle to any position that suits you. If you find the drag capability annoying, turn it off with the labeled toggle button. Break the puzzle into as many pieces as you want. Break it again. Move the pieces into position to solve it. Stuck? Use the hint button. Fed up? Let the puzzle solve itself with the solve button. Load a new puzzle image and play with that one for a while. The images have not been pre-loaded, so you will have to wait for a download when you switch images. At any stage, an optional grid can be turned on and off to assist in piece placement. If the puzzle has a low piece count, the grid may slow the puzzle down. We'll learn why later.
We will discuss:
At the end of last column, we had created a puzzle and dispersed the pieces. It is at this stage that most users will decide if they need a grid to help them solve the puzzle.
Produced by Peter Belesis and
| ||||||||||||||||||||
All Rights Reserved. Legal Notices.
Created: Nov. 13, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column9/
