DHTML Jigsaw Puzzle: IE4 | 2
The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
creating a low-bandwidth customizable puzzle in Explorer 4
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".
Screenshot of Puzzle for non-IE4 browsers
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.
In This Column
We will discuss:
- setting the grid to accommodate the piece count,
- grabbing the puzzle pieces to begin manual solve
- moving the puzzle pieces
- dropping and positioning the puzzle pieces
- solving the puzzle automatically
- positioning the pieces automatically
- changing the piece count on-the-fly
- loading a new puzzle image
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.
Created: Nov. 13, 1997
Revised: Jan. 18, 1998