A DOM-Based Sliding Puzzle (9)

The Code

<HTML>
<HEAD>
<TITLE>The South Park Sliding Puzzle</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var oldBlank = 10;
var size = 11;

var picture = new Array("park0.jpg", "park1.jpg", "park2.jpg", "br", "park4.jpg", "park5.jpg", "park6.jpg", "br", "park8.jpg", "park9.jpg", "parkblank.jpg");

function loadPicture() {
  for(i = 0; i < size; i++) {
    divNode.childNodes[i].src = picture[i];
  }
}
 
function randomizePicture() {
  for(i = 0; i < 3000; i++) {
    newBlank = Math.round(Math.random() * (size - 1));
    if (!validClick(oldBlank, newBlank)) continue;
    divNode.childNodes[oldBlank].swapNode(divNode.childNodes[newBlank]);
    oldBlank = newBlank;
  }
}

function validClick(oldSquare, newSquare){
  if (oldSquare == 0 && (newSquare == 1 || newSquare == 4)) return (true);
  if (oldSquare == 1 && (newSquare == 0 || newSquare == 2 || newSquare == 5)) return (true);  
  if (oldSquare == 2 && (newSquare == 1 || newSquare == 6)) return (true);  
  if (oldSquare == 4 && (newSquare == 0 || newSquare == 5 || newSquare == 8)) return (true);  
  if (oldSquare == 5 && (newSquare == 1 || newSquare == 4 || newSquare == 6 || newSquare == 9)) return (true);  
  if (oldSquare == 6 && (newSquare == 2 || newSquare == 5 || newSquare == 10)) return (true);  
  if (oldSquare == 8 && (newSquare == 4 || newSquare == 9)) return (true);  
  if (oldSquare == 9 && (newSquare == 5 || newSquare == 8 || newSquare == 10)) return (true);  
  if (oldSquare == 10 && (newSquare == 6 || newSquare == 9)) return (true);
}

function done() {
  for(i = 0; i < size; i++) {
    lastSlashPos = divNode.childNodes[i].src.lastIndexOf("/");
    lastChar = divNode.childNodes[i].src.length - 1;
    if (divNode.childNodes[i].src.substring(lastSlashPos + 1, lastChar + 1) != picture[i]) return (false);
  }
  return (true);
}

function handleClick() {
  for (i=0; i < size; i++) {
    if (window.event.srcElement == divNode.childNodes[i]) {
      newBlank = i;
      break;
    }
  }
  
if (!validClick(oldBlank, newBlank)) return;
divNode.childNodes[oldBlank].swapNode(divNode.childNodes[newBlank]);
oldBlank = newBlank;
goodClicks++;
window.status = "You made " + goodClicks + " moves";
if (done()) alert("Congratulations! You made it in " + goodClicks + " moves");
}

function addOneRow() {
  for (i=0; i < 3; i++) {
    tempSquareNode = squareNode.cloneNode();
    divNode.appendChild(tempSquareNode);
  }
}

function addBr() {
  tempBrNode = brNode.cloneNode();
  divNode.appendChild(tempBrNode);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" onclick=handleClick() ID="bodyNode">
<SCRIPT LANGUAGE = "JavaScript">
<!--
if (navigator.appVersion.indexOf(" 5.") == -1) alert("The puzzle is supported by Version 5 and up only")
else {
  var divNode = document.createElement("DIV");
  divNode.align = "center";
  bodyNode.appendChild(divNode);
  var squareNode = document.createElement("IMG");
  var brNode = document.createElement("BR");
  addOneRow();
  addBr();
  addOneRow();
  addBr();
  addOneRow();
  loadPicture();
  randomizePicture();
  var goodClicks = 0;
  window.status = "You made " + goodClicks + " moves";
}
// -->
</SCRIPT>
</BODY>
</HTML>