DHTML Jigsaw Puzzle: IE4

The DHTML Lab Jigsaw Puzzle, Part I:
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, of course, soon follow.

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.

With the introduction of DHTML positioning and drag and drop capabilities, the web is hosting a growing number of variations on the jigsaw puzzle theme. Why, then, do we feel the need to create yet another one? Ours, simply, is completely different from any that we have seen so far.

The Dynamic HTML Lab Jigsaw Puzzle:

• loads and uses only one user-defined image per puzzle
• breaks the image into a user-specified number of pieces
• the number of pieces can be changed on-the-fly
• can be dragged by the user to any position on the page
• has automatic solve and hint features
• can load a new puzzle at any stage

Try it for yourself with the puzzle below. Drag it 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. When you're ready, read on to learn how we created it.

The Basic Concept

As you have guessed, the puzzle is not composed of smaller images. It takes user-supplied parameters and clips the original image, creating a puzzle piece. The cached original image is loaded-and-clipped, loaded-and-clipped until all pieces are created. This allows us to use any GIF or JPG as a puzzle by simple loading it.

In this column our script is long, because we are dealing with an application, as opposed to a technique. Almost all the component techniques have been discussed before. Therefore our approach will be more-or-less linear. We will go through the completed application step-by-step. The code can be found, as usual, in our Complete Code pages (this time we have more than one). Refer to it often as we proceed. In fact, it would be best to take a quick glance now before we move on

In This Column

We will discuss:

• creating the nested CSS elements that make up the puzzle,
• initializing the puzzle for play, when loaded
• creating positioned CSS elements on-the-fly
• creating the illusion of many pieces through clipping
• dispersing the pieces randomly in the visible page

Before we can begin our cool puzzle effects, we must first create it, and place it on our page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov. 5, 1997
Revised: Jan. 18, 1998

URL: https://www.webreference.com/dhtml/column8/