DHTML Jigsaw Puzzle: NN4; Initialization

The DHTML Lab Jigsaw Puzzle, Part III: NN4
initializing the puzzle

The Variables

The global variables declared at the beginning of our script are exactly the same as in the IE version. They are listed here for reference. A complete discussion of them, and the general flow of the script, can be found in Part I and Part II of our puzzle tutorial.

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 = " ";
Upon Complete Load
Our load-checking function, whenLoaded() is called by the three 
onLoad handlers. The first two times, it returns. The third, it executes
its statements.
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");
}
We initialize NN-specific variables to use throughout our script, to assist both
in shortening the element and object identifiers, and for later
cross-browser referencing. It is much easier to refer to the button that
turns the grid on and off as gridBut, than as
document.elPuzzle.document.elControls.document.fmControls["gridBut"].
We allow dragging of the full puzzle or not, depending on the initial
variable setting. The clipTop and clipLeft properties, used in drag &
drop placement, are initialized for elPuzzle, then the initPuzz()
function is called. This function will initialize all our new puzzle
images. Since our image is already loaded, we pass it a dummy argument
of "firstPic", to use in testing for possible new images.
function initPuzz(whichIm) {
    isNewPuzz = true;
    if (isBroken) { allDone(false) };
    changeImage(whichIm);
    elPuzzle.visibility = "show";
    isCreated = false;
    pieceToSolve = 1;
}
The single argument for initPuzz() is the src of a new puzzle image,
as we saw in our SELECT onChange handler. This argument will be passed
on to another function. We check to see if initPuzz() was called while the
puzzle was broken. If it was, our cleanup function allDone() is called.
When we return from allDone(), a new function, changeImage() is called
with the whichIm argument. When we return from changeImage(), our puzzle
is fully formatted, so we show it to the user for the first time.
Note that we provide the visibility property with a value of show. This is
the Navigator standard. The CSS standard, visible, is also supported, as
we know, since in all our columns so far, it has been the one used.
Internally, NN changes visible, in reality an alias, to show. Later in
the script, we will use dynamically created layers that only recognize
show. Therefore, we establish show as the Navigator standard for the
puzzle script. On subsequent calls to initPuzz(), when the puzzle is already visible,
this line will be redundant.
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;
}
The loading of new images and puzzle formatting is performed in changeImage().
Since, the first time through,
our image is already loaded, we check the whichIm argument for a value
of "firstPic". If we find it, we skip the image loading statements. On
every other visit to changeImage() these statements will be executed. That is, we will
completely replace the contents of the elImage object with new HTML that
loads a new image with whichIm as its cource file. By writing new HTML, we create a new document.images
array for elImage which will store information on the new image,
including correct width and height values, which we need for puzzle
formatting. If we had simply updated the old document.images array, we would have
changed the image src but the width and height would always reflect those of the
first puzzle image.
With our new image loaded, we store its width and height in the puzzWidth and puzzHeight variables, and using these variables, we format the puzzle.
We establish the visible width of our full puzzle by clipping it to
the width of the new image plus the required border widths. Our grid is clipped to the size of the new image.
Next, we take our controls and place them after the image, adding two border
widths, one for the top puzzle border and the other for the
image/controls separating border. Our controls are clipped to the same
width as the image. We then use the document.height property to
calculate the height, not of the element, but of the HTML contained
within it. That's where we clip the bottom part of elControls. Our
nested elements are now all the correct size. Finally, we clip the
bottom of the full puzzle by allowing for the image, the HTML content of
elControls and three border widths.
Once we have a completely formatted puzzle, we position it in the horizontal center of our page.

Now, we can break the puzzle, create the puzzle pieces, and begin play.



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/puzzNSinit.html