DHTML Jigsaw Puzzle: IE4; Creating the Pieces

The DHTML Lab Jigsaw Puzzle, Part I: IE4
Creating the elements for the puzzle pieces

After all the screenshots, a working version of the puzzle is once again available below. Before continuing with the tutorial, take a moment to get a feel for the puzzle workings, especially the Break button. Click on it. Check your status bar. When the pieces have broken, click it again without solving any. Solve a few, then break again. Then continue reading to learn about the break routines. As we discuss the functions, come back to the puzzle to see them in action.

Screenshot of Puzzle for non-IE4 browsers

When the users load a fresh image, they can proceed to break up the image, using the default values. When they click the Break button, the breakUp() function is called:

function breakUp() {
    puzzLeft = elPuzzle.style.pixelLeft + bordWidth; 
    puzzTop = elPuzzle.style.pixelTop + bordWidth;
    pieceToSolve = 1;
    if (isNewPuzz && isBroken) { allDone(false) };
    if (isNewPuzz) { createPuzzle() };
}
First we find the pixel positions on the page of the puzzle left and top, which are just inside the border, and assign them to our tracking variables. Since we are just breaking the puzzle, no pieces are solved, so the next piece to be solved (pieceToSolve) is 1.
If our puzzle is already broken and a new image is being loaded or new piece sizes are being called for, our caretaker allDone() function is called. Remember the isNewPuzz variable is also set in our across and down SELECT boxes.
If we are breaking a new puzzle, as opposed to rescattering the pieces of an already broken one, we must first create the puzzle. So we call the createPuzzle() function.
function createPuzzle() {
    if (!isCreated) { createPieces() };
}
Once in createPuzzle(), we check if the pieces have been created. If they haven't, we go to the createPieces() function. Bear with us. This will all make sense in a minute.
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);
}
Now the fun begins! First we find out how many pieces in total we need and assign that value to puzzPieces. This function is called to create the CSS positioned elements that will become the puzzle pieces. Except for an incrementing ID, and image NAME, all elements have this HTML:
<DIV ID="PIECE1" CLASS=clPuzzPiece>
    <IMG NAME="imPiece1">
</DIV>
The image gets no SRC for now. We will include that dynamically later. Since the pieces are many (up to 81, in our case) and have the same characteristics, their CSS properties are defined as a class. Add a class declaration in your style sheet:
.clPuzzPiece {
    position: absolute;
    visibility: hidden;
}
The pieces are created once. Our example default puzzle is 5x5, which corresponds to twenty-five elements created. The piecesCreated variable keeps track of this number. If we use the same puzzle pieces or less in the future, new elements will not be created. If our puzzle pieces go over twenty-five then the requisite number will be created and so on. As a courtesy we track the creation of the elements in the status bar.
We create a string with the element HTML and insert this string into the page with the insertAdjacentHTML() method. This method, and associated properties, are discussed in great detail in column 5. To track its draggability, every time an element is created, it is assigned a draggable property, as we did for elPuzzle above. Once all elements have been created, the piecesCreated variable is updated and the last element to be created
is assigned to the activeEl variable. Remember activeEl? We used it to track the topmost element in z-order in our Drag & Drop columns. It will serve the same purpose here.
Once all the required elements have been created, we can go back to the createPuzzle() function to build the puzzle.



Produced by Peter Belesis and
 
All Rights Reserved. Legal Notices.

Created: Nov. 05, 1997

Revised: Sept 04, 1998
URL: https://www.webreference.com/dhtml/column8/puzzCreate.html