
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Logo Scramble</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>
<body>

<script language="JavaScript" type="text/javascript">
 
//
// Logo Scramble Game
//   written by Paul Dempsey
//
// Published in WebTechniques, February 2001
//
// Modified by Paul Burney, February 2001
//   for use with this web site.
//
// Modified again, November 2002 by Paul Burney
//         I added an offset to allow other images on the page, but
//        it was a huge pain until I remembered that + does concatenation
//        not just addition.  So I had to fudge a type cast for all my 
//        additions to the offset.  Doh!  Back to PHP/Perl for me.
//

// how many images on the page before the game images?
imgoffset = 2;

function Initialize() {
   var blank;
   blankpic = new Image();
   blankpic.src = "images/0.jpg";            // pre-cache the blank image
   pics = new Array(9);               // load images into array
  for (var img=0; img < 9; img++) {
       dimg = img+imgoffset;
     pics[img] = new Image();
     pics[img].src = document.images[dimg].src;
     }
  adjoin = new Array(9);       // show which images are next to each other
  adjoin[0]="13";
  adjoin[1]="024";
  adjoin[2]="15";
  adjoin[3]="046";
  adjoin[4]="1357";
  adjoin[5]="248";
  adjoin[6]="37";
  adjoin[7]="468";
  adjoin[8]="57";
  }                           // end function Initialize
  
function StartGame() {

    gamenotstarted = false;

    //loop through array and place images in start locations (in case user gave up)
    for (var img=1; img < 9; img++) {
        dimg = img*1+imgoffset*1;
        document.images[dimg].src = pics[img].src
    }

    //set the first image to the blank image src
    document.images[imgoffset].src = blankpic.src;

    // initialize a blank variable
    blank = 0;

    // this loop mixes up the tiles
    for (var sloop=0; sloop < 100; sloop++) {
        dblank = blank*1+imgoffset*1;
        // picks one of the elements from the selected image at random
        index = Math.floor(Math.random() * adjoin[blank].length);
        // gets the next tile to move from the tiles "next to" it 
        movepic = adjoin[blank].charAt(index);
        dmovepic = movepic*1+imgoffset*1;
        // set the src of the blank image to the moved one
        document.images[dblank].src = document.images[dmovepic].src;
        // set the src of the moved image to blank one
        document.images[dmovepic].src = blankpic.src;
        // prepare for the next switch
        blank = movepic;
    }

    // initialize other values
    tries = 0;
    document.game.numtry.value = "";
    document.game.message.value = "Good luck!";

}   // end function StartGame
  
function MoveCard(imgnum) {

    if (gamenotstarted) {

        StartGame()

    } else {

        // set the user specified image to the offset one
        dimgnum = imgnum*1 + imgoffset*1;
        
        // feedback for the user
        if (tries == 8) {document.game.message.value = "Harder than it looks?"}
        if (tries == 16) {document.game.message.value = "Keep trying, you can do it!"}
        if (tries == 24) {document.game.message.value = "Maybe you should start over?"}
        
        if (adjoin[blank].indexOf(imgnum) > -1) {
            dblank = blank*1 + imgoffset*1;
            tries++;
            document.game.numtry.value = tries;
            document.images[dblank].src = document.images[dimgnum].src;
            document.images[dimgnum].src = "images/0.jpg";
            blank = imgnum;
            
        } else {
        
            document.game.message.value = "You must select a piece that is next to the blank piece.";

        }
        
        complete = true;
        
        for (var img=1; img < 9; img++) {        // see if the pieces are in the right place
            dimg = img*1 + imgoffset*1;
            if (document.images[dimg].src != pics[img].src) {
                complete = false;
                break;
            }
        }
        
        if (complete) {
            gamenotstarted = true;
            document.images[imgoffset].src = pics[0].src;
            document.game.message.value = "Congratulations! You did it!";
        }

    }

}   // end function MoveCard
  
</script>

<form name="game">

<h2>Logo Scramble Game</h2>

<p>To start, click on the button below:</p>

<p><input type="button" value="New Game" onclick="StartGame()"></p>  

  
  <table border="0" cellspacing="0" cellpadding="0">
  <tr align="center" valign="middle">
      <td><a href="javascript:MoveCard(0)"><img border="0" src="images/1.jpg" width="50" height="50" alt=''></a></td>
      <td><a href="javascript:MoveCard(1)"><img border="0" src="images/2.jpg" width="50" height="50" alt=''></a></td>
      <td><a href="javascript:MoveCard(2)"><img border="0" src="images/3.jpg" width="50" height="50" alt=''></a></td>
  </tr>
  <tr align="center" valign="middle">
      <td><a href="javascript:MoveCard(3)"><img border="0" src="images/4.jpg" width="50" height="50" alt=''></a></td>
      <td><a href="javascript:MoveCard(4)"><img border="0" src="images/5.jpg" width="50" height="50" alt=''></a></td>
      <td><a href="javascript:MoveCard(5)"><img border="0" src="images/6.jpg" width="50" height="50" alt=''></a></td>
  </tr>
  <tr align="center" valign="middle">
      <td><a href="javascript:MoveCard(6)"><img border="0" src="images/7.jpg" width="50" height="50" alt=''></a></td>
      <td><a href="javascript:MoveCard(7)"><img border="0" src="images/8.jpg" width="50" height="50" alt=''></a></td>
      <td><a href="javascript:MoveCard(8)"><img border="0" src="images/9.jpg" width="50" height="50" alt=''></a></td>
  </tr>
  </table>
  
  <script language="javascript">
  gamenotstarted = true;
  Initialize();
  </script>

<p><input type="text" name="message" value='' SIZE="60"></p>

<p>Number of Moves: <input type="text" name="numtry" value='' SIZE="3"></p>
  
  </form>
  


</body>
</html>