WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column9

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

function allDone(solved){
    for (i=1; i<=puzzPieces; i++) {
        tempEl = eval("PIECE" + i);
        tempEl.style.visibility = "hidden";
    }
    elImOrig.style.visibility = "visible";
    if (isGrid) { elGrid.style.visibility = "hidden" };
    if (isPuzzDraggable) {
        elPuzzle.draggable = true;
        elPuzzle.style.cursor = "move";
    }

    solvedCount = 1;

    if (solved) {
        isBroken = false;
        tempEl = elImOrig;
        flashTimer = setInterval("visToggle(false)",100);
    }
}

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

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Workers Say Telework Is More Productive, Bosses Not So Sure · Kingston Debuts Power-Saving Memory Upgrades · Social Networking is King: Facebook Edges Google

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

URL: http://www.webreference.com/dhtml/column9/puzzDone.html