The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
creating the puzzle pieces
As you will recall, when the user presses the Break button, the breakUp() function is called, which in turn calls createPuzzle() to clip the pieces, which calls createPieces() to create the pieces, if a new image has been loaded.
The cross-browser version of these three important functions simply combines the Navigator and Explorer versions. There are very few differences in the code as you know it.
function createPieces(){
puzzPieces = puzzAcross * puzzDown;
if (puzzPieces > piecesCreated) {
makeStart = piecesCreated+1;
for(i=makeStart; i<=puzzPieces; i++) {
window.status = "Creating puzzle piece... " + i;
if (IE4) {
divStr = "<DIV ID=PIECE" + i + " CLASS=clPuzzPiece>"
+ "<IMG NAME=imPiece" + i + " ></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",divStr);
}
else {
eval("PIECE" + i + " = new Layer(puzzWidth)");
}
eval("PIECE" + i + ".showIt = showIt");
}
piecesCreated = puzzPieces;
}
activeEl = eval("PIECE" + puzzPieces);
}
In createPieces(), we have added a statement that creates a showIt() method for all puzzle pieces, since their visibility is often toggled.
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);
if (IE4) {
document.images["imPiece" + pieceCount].src = puzzImage.src;
}
else {
tempEl.document.write("<IMG SRC=" + puzzImage.src + ">");
tempEl.document.close();
}
pixR = pieceWidth * i;
pixL = pieceWidth * (i-1);
if (IE4) {
tempEl.style.clip = "rect(" + pixT + sp + pixR + sp + pixB + sp + pixL + ")";
}
else {
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 = (IE4) ? (elPuzzle.style.pixelLeft + bordWidth) : (elPuzzle.left + bordWidth);
puzzTop = (IE4) ? (elPuzzle.style.pixelTop + bordWidth) : (elPuzzle.top + bordWidth);
pieceToSolve = 1;
if (isNewPuzz && isBroken) { allDone(false) };
if (isNewPuzz) { createPuzzle() };
if (isPuzzDraggable) {
elPuzzle.draggable = false;
if (IE4) { elImage.style.cursor = "default" }
}
if (IE4) {
elBlank.style.width = puzzWidth;
elBlank.style.height = puzzHeight;
}
else {
elBlank.clip.right = puzzWidth;
elBlank.clip.bottom = puzzHeight;
}
elBlank.showIt(true);
if (IE4) {
startL = document.body.scrollLeft;
startT = document.body.scrollTop;
endL = (startL + document.body.offsetWidth) - puzzWidth;
endT = (startT + document.body.offsetHeight) - puzzHeight;
}
else {
startL = 10;
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.draggable = true;
if (IE4) {
tempEl.style.pixelLeft = putL;
tempEl.style.pixelTop = putT;
tempEl.style.cursor = "move";
}
else {
tempEl.left = putL;
tempEl.top = putT;
}
tempEl.showIt(true);
}
if (isGrid) { elGrid.showIt(true)}
isBroken = true;
solvedCount = 1;
if (NS4) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = grabEl;
}
}
The first addition to breakUp() is the Explorer code for manipulating the width and height of elBlank. Remember, elBlank was introduced in the Navigator version of the code. It appears whenever a puzzle is broken in place of the image, creating a white workspace. In the original Explorer code, we simply made the image hidden, to create the workspace.
The second, very important, addition is the Navigator code for capturing the mousedown event. Now that our puzzle is broken, and puzzle draggability is off by default, we can enable mousedown capturing for moving our pieces. In the new scheme of things, therefore, Navigator only captures mousedown when the user moves over the puzzle image or the puzzle is broken and ready to be solved. Explorer still continues to capture mousedown universally.
As you can see, we have created the cross-browser version with very few additions. The remaining functions have even fewer modifications.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: Dec. 17, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column11/puzzCBcreate.html
