DHTML Jigsaw Puzzle: IE4; Breaking

The DHTML Lab Jigsaw Puzzle, Part I: IE4
Breaking the puzzle and dispersing the puzzle pieces

Once back in breakUp(), with all our elements created and clipped, we need to perform a few overhead tasks before we actually send the pieces flying in all directions.

Once a puzzle is broken up, elPuzzle, the parent element into which the pieces will be dragged, cannot itself be draggable. That would be too annoying. If elPuzzle has draggability, we temporarily turn it off and change the cursor back to a pointer.

    if (isPuzzDraggable) {
        elPuzzle.draggable = false; 
        elPuzzle.style.cursor = "default";
    }
Then we hide the puzzle image by setting the visibility property of the IMG element itself:
    elImOrig.style.visibility = "hidden";
We now determine what part of the page is visible in the client window. When we disperse our pieces we do not want to send them off the visible part of the page. Another courtesy. We use the document.body.scrollLeft and document.body.scrollTop properties, discussed in column 7, to determine the pixel coordinates of the top-left corner of the visible page:
    startL = document.body.scrollLeft;
    startT = document.body.scrollTop;
Two new IE4 properties, document.body.offsetWidth and document.body.offsetHeight will give us the width and height of the visible part of the page. In essence, we are determining the interior window dimensions. If we add these values to startL and startT we have the bottom-right corner coordinates of the visible page. Since all our elements are as wide and high as the puzzle image itself, we subtract this width and height from our bottom-right values. We now have allowable pixel coordinates for the top-left of our elements:
    endL = (startL + document.body.offsetWidth) - puzzWidth;
    endT = (startT + document.body.offsetHeight) - puzzHeight;
Any value between startL and endL applied to the pixelLeft property will keep our element in the visible page, as will any pixelTop value between startT and endT.
We enter a for loop to execute the same statements for all pieces. A random number generator function, getRandNums(), is called, which takes two arguments, from and to. It returns a number between the two numbers sent as arguments. We call it twice to get random coordinates to use for piece placement:
    for (i=1; i
Once we have the locations, we get an element to work with, set its draggable property to true, and position it. The cursor is changed and finally the piece is made visible. These steps are repeated until all elements have been positioned. We next check to see if the grid should be on. If yes, we make that visible as well. And finally we reset the isBroken and solvedCount variables. The complete function looks like this:
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
    if (isGrid) {elGrid.style.visibility = "visible"};
    isBroken = true;
    solvedCount = 1;
}
The random number generator function will not be discussed in detail. It is reproduced here for reference:
function getRandNums(from,to){
    temp = parseInt((Math.random() * (to-from)) + (from));
    while (isNaN(temp)) {
        temp = parseInt((Math.random() * (to - from)) + (from))
    }
    return temp
}
Whew! Finally, we have broken the puzzle up! Now all we have to do is put it back together.



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

Created: Nov. 5, 1997

Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column8/puzzBreak.html