DHTML Jigsaw Puzzle: Cross-Browser; The Complete Code (Puzzle SCRIPT)
  
|
The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
SPECIAL EDITION; the director's cut 2/3
Comments
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 = " ";
imageSelected = false;
isSolving = false;
function whenLoaded() {
loadCount++;
if (loadCount initNS4() }
else { initIE4() }
if (isPuzzDraggable) {
elPuzzle.draggable = true;
if (IE4) { elImage.style.cursor = "move"}
}
else {
elPuzzle.draggable = false;
dragBut.value = "Drag OFF";
}
elPuzzle.showIt = elGrid.showIt = elBlank.showIt = elImage.showIt = elControls.showIt = showIt;
elPuzzle.clipLeft = elPuzzle.clipTop = 0;
initPuzz("firstPic");
}
function initNS4(){
elPuzzle = document.elPuzzle;
elBlank = elPuzzle.document.elBlank;
elGrid = elPuzzle.document.elGrid;
elImage = elPuzzle.document.elImage;
elControls = elPuzzle.document.elControls;
gridImage = elGrid.document.images["imGrid"];
puzzImage = elImage.document.images["imOrig"];
gridBut = elControls.document.fmControls["gridBut"];
dragBut = elControls.document.fmControls["dragBut"];
elImage.onmouseover = overImage;
elImage.onmouseout = outImage;
}
function overImage() {
if (!isPuzzDraggable) {return};
imageSelected = true;
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = grabEl;
}
function outImage() {
imageSelected = false;
document.releaseEvents(Event.MOUSEDOWN);
}
function initIE4(){
dragBut = document.fmControls["dragBut"];
gridBut = document.fmControls["gridBut"];
puzzImage = elImOrig;
elControls.style.textAlign = "center";
}
function showIt(on){
if (IE4) {this.style.visibility = (on) ? "visible" : "hidden"}
else {this.visibility = (on) ? "show" : "hide"}
}
function initPuzz(whichIm) {
isNewPuzz = true;
if (isBroken) {allDone(false)};
changeImage(whichIm);
elPuzzle.showIt(true);
isCreated = false;
pieceToSolve = 1;
}
function changeImage(whichIm) {
if (whichIm != "firstPic") {
imStr = "<IMG NAME='imOrig' ID='elImOrig' SRC=" + whichIm + ">";
if (NS4) {
elImage.document.write(imStr);
elImage.document.close();
}
else {
elImage.innerHTML = imStr;
elImOrig.onload = shapeIt;
return;
}
}
shapeIt();
}
function shapeIt() {
if (IE4) puzzImage = elImOrig;
puzzWidth = puzzImage.width;
puzzHeight = puzzImage.height;
if (NS4) {
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;
}
else {
elControls.style.pixelTop = puzzHeight + (bordWidth*2);
elControls.style.width = puzzWidth;
elPuzzle.style.width = puzzWidth + (bordWidth*2);
elPuzzle.style.height = puzzHeight + (bordWidth*3) + elControls.offsetHeight;
elPuzzle.style.pixelLeft = (document.body.clientWidth-elPuzzle.style.pixelWidth)/2;
}
}
function createPieces(){
puzzPieces = puzzAcross * puzzDown;
if (puzzPieces > piecesCreated) {
makeStart = piecesCreated+1;
for(i=makeStart; i
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);
}
function createPuzzle() {
if (!isCreated) { createPieces() };
pieceWidth = puzzWidth/puzzAcross;
pieceHeight = puzzHeight/puzzDown;
while (pieceCount
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
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;
}
}
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;
if (IE4) {
elImGrid.style.width = gridWidth;
elImGrid.style.height = gridHeight;
elGrid.style.clip = "rect(0 " + puzzWidth + sp + puzzHeight + " 0)";
}
else {
elGrid.document.write("<IMG NAME='imGrid' SRC='grid.gif' WIDTH=" + gridWidth + " HEIGHT=" + gridHeight + ">");
elGrid.document.close();
elGrid.clip.right = puzzWidth;
elGrid.clip.bottom = puzzHeight;
}
gridBut.value = "Grid ON";
if (isBroken) { elGrid.showIt(true) }
}
function preSolve(isFullSolve) {
if (isSolving || !isBroken || isNewPuzz) { return };
solve(isFullSolve);
}
function solve(isFullSolve) {
if (pieceToSolve > puzzPieces) { pieceToSolve = 1; return }
isSolving = (isFullSolve) ? 1 : 0;
tempEl = eval("PIECE" + pieceToSolve);
if (tempEl.draggable){
if (tempEl != activeEl ) {
if (IE4) {tempEl.style.zIndex = activeEl.style.zIndex + 1}
else {tempEl.moveAbove(activeEl)}
activeEl = tempEl;
}
flashTimer = setInterval("visToggle(" + isFullSolve + ")",100);
}
else { pieceToSolve++; solve(isFullSolve) };
}
function visToggle(isFullSolve){
if (flashCount!=flashTotal) {
if (IE4) {
tempEl.style.visibility = (tempEl.style.visibility=='visible') ? 'hidden' : 'visible';
}
else {
tempEl.visibility = (tempEl.visibility=='show') ? "hide" : "show";
}
flashCount++;
}
else {
clearInterval(flashTimer);
flashCount = 0;
tempEl.showIt(true);
if (tempEl != elImage) { origPos(tempEl) }
if (isFullSolve) { pieceToSolve++; solve(true) }
}
}
function origPos(tempEl) {
if (IE4) {
tempEl.style.pixelLeft = puzzLeft;
tempEl.style.pixelTop = puzzTop;
tempEl.style.cursor = 'default';
}
else {
tempEl.left = puzzLeft;
tempEl.top = puzzTop;
}
tempEl.draggable=false;
solvedCount++;
if (solvedCount > puzzPieces) {
allDone(true);
}
}
function allDone(solved){
if (isSolving) {
isSolving = false;
clearInterval(flashTimer);
}
for (i=1; ielImage.style.cursor = "move"}
}
solvedCount = 1;
if (solved) {
if (NS4) {document.releaseEvents(Event.MOUSEDOWN)}
tempEl = elImage;
flashTimer = setInterval("visToggle(false)",100);
}
}
function gridToggle() {
if (isGrid) {
elGrid.showIt(false);
if (IE4) {
elImGrid.style.width = elImGrid.style.height = 1;
}
gridBut.value = "Grid OFF";
}
else { setGrid() };
isGrid = !isGrid;
}
function dragToggle() {
isPuzzDraggable = !isPuzzDraggable;
if (!isBroken) { elPuzzle.draggable = !elPuzzle.draggable };
if (isPuzzDraggable) {
if (IE4) { elImage.style.cursor = "move" };
dragBut.value = "Drag ON";
}
else {
if (IE4) { elImage.style.cursor = "default" }
dragBut.value = "Drag OFF";
}
}
Go on to the puzzle drag script.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: Dec. 17, 1997
Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column11/allCode2.html
Find a programming school near you