DHTML Jigsaw Puzzle: NN4; The Complete Code (Puzzle SCRIPT)

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

Comments

No browser detection is included. Navigator 4 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 };
    elPuzzle = document.elPuzzle;
    elBlank = elPuzzle.document.elBlank;
    elImage = elPuzzle.document.elImage;
    puzzImage = elImage.document.images["imOrig"];
    elGrid = elPuzzle.document.elGrid;
    elControls = elPuzzle.document.elControls;
    gridBut = elControls.document.fmControls["gridBut"];
    dragBut = elControls.document.fmControls["dragBut"];
    if (isPuzzDraggable) {
        elPuzzle.draggable = true;
    }
    else {
        elPuzzle.draggable = false;    
        dragBut.value = "Drag OFF";
    }
    elPuzzle.clipLeft = elPuzzle.clipTop = 0;
    initPuzz("firstPic");
}
function initPuzz(whichIm) {
    isNewPuzz = true;
    if (isBroken) { allDone(false) };
    changeImage(whichIm);
    elPuzzle.visibility = "show";
    isCreated = false;
    pieceToSolve = 1;
}
function changeImage(whichIm) {
    if (whichIm != "firstPic") {
        elImage.document.write("<IMG NAME='imOrig' SRC=" + whichIm + ">");
        elImage.document.close();
    }
    puzzWidth = puzzImage.width;
    puzzHeight = puzzImage.height;
    elPuzzle.clip.right = puzzWidth + (bordWidth*2);
    elGrid.clip.right = puzzWidth;
    elGrid.clip.bottom = puzzHeight;
    elControls.top = puzzHeight + (bordWidth*2);
    elControls.clip.right = puzzWidth
    elControls.clip.bottom = elControls.document.height;
    elPuzzle.clip.bottom = puzzHeight + elControls.document.height + (bordWidth*3);
    elPuzzle.left = (window.innerWidth-elPuzzle.clip.width)/2;
}
function createPieces(){
    puzzPieces = puzzAcross * puzzDown;
    if (puzzPieces > piecesCreated) {
        makeStart = piecesCreated+1;
        for(i=makeStart; i<=puzzPieces; i++) {
            window.status = "Creating puzzle piece... " + i;
            eval("PIECE" + i  + " = new Layer(puzzWidth)");
        }
        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);
            tempEl.document.write("<IMG WIDTH="+puzzWidth+" HEIGHT="+puzzHeight+" SRC="+puzzImage.src+">");
            tempEl.document.close();
            pixR = pieceWidth * i;
            pixL = pieceWidth * (i-1);
            tempEl.clip.top = pixT
            tempEl.clip.left = pixL
            tempEl.clip.right = pixR 
            tempEl.clip.bottom = pixB
            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.left + bordWidth;
    puzzTop = elPuzzle.top + bordWidth;
    pieceToSolve = 1;
    if (isNewPuzz && isBroken) { allDone(false) };
    if (isNewPuzz) { createPuzzle() };
    if (isPuzzDraggable) { elPuzzle.draggable = false }
 
    elBlank.clip.right = puzzWidth; 
    elBlank.clip.bottom = puzzHeight;
    elBlank.visibility = "show";
    
    startL = 0;
    startT = elPuzzle.top;
    endL = window.innerWidth - puzzWidth;
    endT = elPuzzle.top + elPuzzle.clip.height - puzzHeight;
    for (i=1; i<=puzzPieces; i++) {
        putL = getRandNums(startL,endL);
        putT = getRandNums(startT,endT);
        tempEl = eval("PIECE" + i);
        tempEl.left = putL;
        tempEl.top = putT;
        tempEl.draggable = true;
        tempEl.visibility = "show";
    }
    if (isGrid) { elGrid.visibility = "show" }
    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() {
    gridWidth = (9/puzzAcross) * puzzWidth;
    gridHeight = (9/puzzDown) * puzzHeight;
    elGrid.document.write('<IMG NAME="imGrid" SRC="grid.gif" WIDTH='+gridWidth+' HEIGHT='+gridHeight+'>');
    elGrid.document.close();
    gridBut.value = "Grid ON";
    if (isBroken) { elGrid.visibility = "show" }
}
function solve(isFullSolve) {
    if (!isBroken) { return };
    tempEl = eval("PIECE" + pieceToSolve);
    if (tempEl.draggable){
        if (tempEl != activeEl ) {
            tempEl.moveAbove(activeEl);
            activeEl = tempEl;
        }
        flashTimer = setInterval("visToggle(" + isFullSolve + ")",100);
    }
    else { pieceToSolve++; solve(isFullSolve) };
}
function visToggle(isFullSolve){
    if (flashCount != flashTotal) {
        tempEl.visibility = (tempEl.visibility == "show") ? "hide" : "show";
        flashCount++;
    }
    else {
        clearInterval(flashTimer); 
        flashCount = 0;
        tempEl.visibility = 'show'; 
        if (tempEl != elImage) { origPos() }
        if (isFullSolve) { pieceToSolve++; solve(true) }
    }
}
function origPos() {
    tempEl.left = puzzLeft;
    tempEl.top = puzzTop;
    tempEl.draggable = false;
    solvedCount++;
    if (solvedCount > puzzPieces) {
        allDone(true);
    }
}
function allDone(solved) {
    for (i=1; i

Go on to the Navigator puzzle drag script.

Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column10/allCode2.html