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

home / experts / dhtml / column8

The DHTML Lab Jigsaw Puzzle, Part I: IE4
SPECIAL EDITION; the director's cut 2/3

Comments

No browser detection is included. Explorer 4 Release is assumed. Browser detection will be added in the cross-browser version.

The two external scripts can be downloaded as a zip file.

The Main Puzzle Script (puzzExt.js)

puzzLeft = puzzTop = null;
puzzWidth = puzzHeight = null;
bordWidth = 3;

puzzAcross = puzzDown = 5;

isPuzzDraggable = true;
isGrid = false;

isNewPuzz = null;
isCreated = null;

piecesCreated = 0;
pieceCount = 1;
topCount = 0;

isBroken = false;

solvedCount = 1;
pieceToSolve = null;

flashTotal = 5;
flashCount = 0;

loadTotal = 3;
loadCount = 0;

tempEl = null;
sp = " ";

function whenLoaded() {
    loadCount++;
    if (loadCount < loadTotal) { return };
    if (isPuzzDraggable) {
        elPuzzle.draggable = true;
        elPuzzle.style.cursor = "move";
    }
    else {
        elPuzzle.draggable = false;    
        dragBut.value = "Drag OFF";
    }
    
    elPuzzle.clipLeft = elPuzzle.clipTop = 0;
    initPuzz();
}

function initPuzz() {
    if (isBroken) {allDone(false)};
    puzzWidth = document.images["imOrig"].width;
    puzzHeight =  document.images["imOrig"].height;
    elPuzzle.style.width = elControls.style.width = puzzWidth;
    elPuzzle.style.visibility = "visible";
    isNewPuzz = true;
    isCreated = false;
    pieceToSolve = 1;
}

function createPieces(){
    puzzPieces = puzzAcross * puzzDown;
    if (puzzPieces > piecesCreated) {
        makeStart = piecesCreated + 1;
        for(i=makeStart; i<=puzzPieces; i++) {
            window.status = "Creating puzzle piece... " + i;
                    
            divStr = "<DIV ID=PIECE" + i + " CLASS=clPuzzPiece>"
                   + "<IMG NAME=imPiece" + i + " ></DIV>";

            document.body.insertAdjacentHTML("BeforeEnd",divStr);
            tempEl = eval("PIECE" + i);
            tempEl.draggable = true;            
        }
    piecesCreated = puzzPieces;
    }
    activeEl = eval("PIECE" + puzzPieces);
}

function createPuzzle() {
    if (!isCreated) { createPieces() };
    pieceWidth = puzzWidth/puzzAcross;
    pieceHeight = puzzHeight/puzzDown; 

    while (pieceCount <= puzzPieces) {

        pixT = topCount * pieceHeight;
        pixB = (topCount + 1) * pieceHeight;

        for (i=1; i<=puzzAcross; i++) {
            window.status = "Clipping image for piece... " + pieceCount;

            tempEl = eval("PIECE" + pieceCount);

            document.images["imPiece" + pieceCount].src = document.images["imOrig"].src; 
            tempEl.style.pixelLeft = puzzLeft;
            tempEl.style.pixelTop = puzzTop;

            pixR = pieceWidth * i;
            pixL = pieceWidth * (i-1);        
            tempEl.style.clip = "rect(" + pixT + sp + pixR + sp + pixB + sp + pixL + ")";
            tempEl.clipLeft = pixL;
            tempEl.clipTop = pixT;
            pieceCount++
        }
        topCount++
    }
    if (isGrid) {setGrid()};    
    isNewPuzz = false;
    isCreated = true;
    pieceCount = 1;
    topCount = 0;
    window.status = "";
}

function breakUp() {
    puzzLeft = elPuzzle.style.pixelLeft + bordWidth; 
    puzzTop = elPuzzle.style.pixelTop + bordWidth;
    pieceToSolve = 1;

    if (isNewPuzz && isBroken) { allDone(false) };
    if (isNewPuzz) { createPuzzle() };

    if (isPuzzDraggable) {
        elPuzzle.draggable = false; 
        elPuzzle.style.cursor = "default";
    }
    elImOrig.style.visibility = "hidden";

    startL = document.body.scrollLeft;
    startT = document.body.scrollTop;
    endL = (startL + document.body.offsetWidth) - puzzWidth;
    endT = (startT + document.body.offsetHeight) - puzzHeight;

    for (i=1; i<=puzzPieces; i++) {
        putL = getRandNums(startL,endL);
        putT = getRandNums(startT,endT);

        tempEl = eval("PIECE" + i);
        tempEl.draggable = true;
        tempEl.style.pixelLeft = putL;
        tempEl.style.pixelTop = putT;
        tempEl.style.cursor = "move";
        tempEl.style.visibility = "visible";
    }

    if (isGrid) {elGrid.style.visibility = "visible"};

    isBroken = true;
    solvedCount = 1;
}

function getRandNums(from,to){
    temp = parseInt((Math.random() * (to-from)) + (from));
    while (isNaN(temp)) {
        temp = parseInt((Math.random() * (to - from)) + (from))
    }
    return temp
}

function setGrid() {
    elImGrid.style.width = (9/puzzAcross) * puzzWidth;
    elImGrid.style.height = (9/puzzDown) * puzzHeight;
    elGrid.style.clip = "rect(0 " + puzzWidth + " " + puzzHeight + " 0)";
    gridBut.value = "Grid ON";
    if (isBroken) {elGrid.style.visibility = "visible"}
}

function visToggle(isFullSolve){
    if (flashCount != flashTotal) { 
        tempEl.style.visibility = (tempEl.style.visibility=='visible') ? 'hidden' : 'visible';
        flashCount++;
    }
    else {
        clearInterval(flashTimer); 
        flashCount = 0;
        tempEl.style.visibility = "visible"; 
        if (tempEl != elImOrig) { origPos(tempEl) };
        if (isFullSolve) { pieceToSolve++; solve(true) }
    }
}

function solve(isFullSolve) {
    if (!isBroken) { return };
    if (pieceToSolve > puzzPieces) { pieceToSolve = 1; return }
    tempEl = eval("PIECE" + pieceToSolve);
    if (tempEl.draggable){
        if (tempEl != activeEl ) {
            tempEl.style.zIndex = activeEl.style.zIndex + 1;
            activeEl = tempEl;
        }

        flashTimer = setInterval("visToggle(" + isFullSolve + ")",100);

    }
    else { pieceToSolve++; solve(isFullSolve) };

}

function origPos(tempEl) {
    tempEl.style.pixelLeft = puzzLeft;
    tempEl.style.pixelTop = puzzTop;
    tempEl.draggable = false;
    tempEl.style.cursor = 'default';
    solvedCount++;
    if (solvedCount > puzzPieces) {
        allDone(true);
    }
}

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);
    }
}

function giveHint() {
    if (isBroken) { solve(false) };
}

function gridToggle(){
    if (isGrid) {
        elGrid.style.visibility = "hidden";
        elImGrid.style.width = 1;
        elImGrid.style.height = 1;
        gridBut.value = "Grid OFF";
    }
    else { setGrid() };
    isGrid = !isGrid;
}

function dragToggle(){
    isPuzzDraggable = !isPuzzDraggable;
    if (!isBroken) { elPuzzle.draggable = !elPuzzle.draggable };
    if (isPuzzDraggable) {
        elPuzzle.style.cursor = "move";
        dragBut.value = "Drag ON";
    }
    else {
        elPuzzle.style.cursor = "default";
        dragBut.value = "Drag OFF";
    }
}

Go on to the puzzle drag script.

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 IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

All Rights Reserved. Legal Notices.
Created: 11/05/97
Revised: 11/13/97

URL: http://www.webreference.com/dhtml/column8/allCode2.html