| home / experts / dhtml / column10 |   
|
|
No browser detection is included. Navigator 4 is assumed. Browser detection will be added in the cross-browser version.
The two external scripts can be downloaded as a zip file.
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 = " ";
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");
}
function initPuzz(whichIm) {
isNewPuzz = true;
if (isBroken) { allDone(false) };
changeImage(whichIm);
elPuzzle.visibility = "show";
isCreated = false;
pieceToSolve = 1;
}
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;
}
function createPieces(){
puzzPieces = puzzAcross * puzzDown;
if (puzzPieces > piecesCreated) {
makeStart = piecesCreated+1;
for(i=makeStart; i<=puzzPieces; i++) {
window.status = "Creating puzzle piece... " + i;
eval("PIECE" + i + " = new Layer(puzzWidth)");
}
piecesCreated = puzzPieces;
}
activeEl = eval("PIECE" + puzzPieces);
}
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);
tempEl.document.write("<IMG WIDTH="+puzzWidth+" HEIGHT="+puzzHeight+" SRC="+puzzImage.src+">");
tempEl.document.close();
pixR = pieceWidth * i;
pixL = pieceWidth * (i-1);
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 = elPuzzle.left + bordWidth;
puzzTop = elPuzzle.top + bordWidth;
pieceToSolve = 1;
if (isNewPuzz && isBroken) { allDone(false) };
if (isNewPuzz) { createPuzzle() };
if (isPuzzDraggable) { elPuzzle.draggable = false }
elBlank.clip.right = puzzWidth;
elBlank.clip.bottom = puzzHeight;
elBlank.visibility = "show";
startL = 0;
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.left = putL;
tempEl.top = putT;
tempEl.draggable = true;
tempEl.visibility = "show";
}
if (isGrid) { elGrid.visibility = "show" }
isBroken = true;
solvedCount = 1;
}
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;
elGrid.document.write('<IMG NAME="imGrid" SRC="grid.gif" WIDTH='+gridWidth+' HEIGHT='+gridHeight+'>');
elGrid.document.close();
gridBut.value = "Grid ON";
if (isBroken) { elGrid.visibility = "show" }
}
function solve(isFullSolve) {
if (!isBroken) { return };
tempEl = eval("PIECE" + pieceToSolve);
if (tempEl.draggable){
if (tempEl != activeEl ) {
tempEl.moveAbove(activeEl);
activeEl = tempEl;
}
flashTimer = setInterval("visToggle(" + isFullSolve + ")",100);
}
else { pieceToSolve++; solve(isFullSolve) };
}
function visToggle(isFullSolve){
if (flashCount != flashTotal) {
tempEl.visibility = (tempEl.visibility == "show") ? "hide" : "show";
flashCount++;
}
else {
clearInterval(flashTimer);
flashCount = 0;
tempEl.visibility = 'show';
if (tempEl != elImage) { origPos() }
if (isFullSolve) { pieceToSolve++; solve(true) }
}
}
function origPos() {
tempEl.left = puzzLeft;
tempEl.top = puzzTop;
tempEl.draggable = false;
solvedCount++;
if (solvedCount > puzzPieces) {
allDone(true);
}
}
function allDone(solved) {
for (i=1; i<=puzzPieces; i++) {
tempEl = eval("PIECE" + i);
tempEl.visibility = "hide";
}
if (isGrid) { elGrid.visibility = "hide" };
elBlank.visibility="hide";
if (isPuzzDraggable) { elPuzzle.draggable = true }
solvedCount = 1;
if (solved) {
isBroken = false;
pieceToSolve = 1;
tempEl = elImage;
flashTimer = setInterval("visToggle(false)",100);
}
}
function giveHint() {
if (isBroken) { solve(false) };
}
function gridToggle() {
if (isGrid) {
elGrid.visibility = "hide";
gridBut.value = "Grid OFF";
}
else { setGrid() };
isGrid = !isGrid;
}
function dragToggle() {
isPuzzDraggable = !isPuzzDraggable;
if (!isBroken) { elPuzzle.draggable = !elPuzzle.draggable };
if (isPuzzDraggable) {
dragBut.value = "Drag ON";
}
else {
dragBut.value = "Drag OFF";
}
}
Go on to the Navigator puzzle drag script.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column10/allCode2.html
