DHTML Jigsaw Puzzle: IE4; Completion

The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
positioning the puzzle pieces automatically

Restoring the Piece to Its Original Position

The two functions on this page are extremely important yet ridiculously simple. The first, origPos(), is called when a piece is to be restored to its correct position. Since, in addition to positioning, it also performs cleanup tasks, it is also called when a user correctly positions a piece by dragging. In the second case, origPos() performs redundant positioning, but it does not affect the program flow.

function origPos(tempEl) {
    tempEl.style.pixelLeft = puzzLeft;
    tempEl.style.pixelTop = puzzTop;
    tempEl.draggable = false;
    tempEl.style.cursor = "default";
    solvedCount++;
    if (solvedCount > puzzPieces) {
        allDone(true);
    }
}
All pieces have the exact same original position on the page, since
the actual "visible" piece is a clipped larger image. All pieces have
the same original coordinates as the puzzle image, so restoring their
position is just a matter of placing them in the same space as the
puzzle image.
Therefore, the piece in question, tempEl, is positioned and its
draggable property is set to false. Once correctly positioned, a puzzle
piece can no longer be dragged. To signal this to the user, we change
the cursor shape back to the default OS cursor.
Recall that we set another variable early in our script: solvedCount.
This variable keeps track of how many pieces have actually been solved
either by the user or through an automatic solve. This behaviour is
different than that of pieceToSolve which is only incremented during
automatic solves and tracks the next-piece-in-line for linear solves.
solvedCount keeps track of user random solves as well. Thus, solvedCount
is incremented and compared against puzzPieces to see if the puzzle is
finished. If it is, allDone() is called. Otherwise, the function
returns.
Finished!
The function allDone() is called on three occasions by three different functions:
by initPuzz() when the user chooses a new image from the drop-down menu
by breakUp() when the user chooses new piece amounts from the drop-down menus while a puzzle is already broken
by origPos() when the puzzle is solved

In the first two cases, an argument of false is passed, as we saw in our
last column. In the third case, true is passed, as we saw above.
function allDone(solved){
    for (i=1; i
When allDone() is called, it immediately hides all the puzzle pieces,
and shows the puzzle image. If we are switching images or changing piece
totals while the puzzle is broken, this allows for a clean transition.
If the puzzle is solved, there is no discernable change in the display.
The puzzle pieces magically combine into one. If our grid is on, it is
hidden as well. If we have chosen our complete puzzle to be draggable,
then once again we change its draggable property and the cursor shape.
Since in all three cases above, a new puzzle will be created,
solvedCount is re-initialized to 1.
If solved is true, that is, if the function was called by origPos(),
it means we have just solved another puzzle. Our isBroken variable is
set to false, since our puzzle is now whole, and we flash the full
puzzle image by repeatedly calling visToggle(). If this is annoying, the
last two lines in the else statement can be omitted.
All that's left for us now, is to discuss a few miscellaneous items
regarding the puzzle code.



Produced by Peter Belesis and
 
All Rights Reserved. Legal Notices.

Created: Nov. 13, 1997

Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column9/puzzDone.html