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

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications Adobe Article: Java Developers Finding a Home at Adobe Flex IBM Articles: A Smarter Business Needs Smarter Technology Intel Xeon Processor Increases Server Efficiency and Capabilities Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database Oracle Whitepapers - Innovation for IT Leaders Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking Internet.com eBook: Get Ready for Windows 7 Microsoft Article: Expression Web 3--New Features for PHP Developers Whitepapers: Manage Your Business Infrastracture with IBM Whitepaper: Maximize Your Storage Investment with HP Internet.com eBook: Becoming a Better Project Manager Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies Video: Microsoft Partner Program Benefits Video: Windows Azure Debugging Tips SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk Video: Deploy Applications on Windows Azure MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center Get the Windows 7 SDK Free Trial: Red Gate SQL Backup Pro 6

Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Virtual Lab: Migrating PHP Applications Enabling Web Slices and Accelerators with a PHP Site Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products

All About Botnets MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

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 Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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

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