<script>

// Notes: this demo has changed a lot as Javascript and DOM change.
// This version should be doing relative position calculations
// (but it doesn't - it's all hard-coded...)

// updatecoords writes the current coordinates of the layer
// holding the cookie image to the form fields xcoord and ycoord.

function updatecoords() {
   var x,y;

     // ie reports position with "px" units, we gotta get rid of this
     // and make sure our variables are numbers to javascript  
     x = document.getElementById("cookielayer").style.left;
     y = document.getElementById("cookielayer").style.top;
     x = x.replace(/px/,""); x=x*1.0;
     y = y.replace(/px/,""); y=y*1.0;

     document.forms["frm"].xcoord.value = x-100;
     document.forms["frm"].ycoord.value = y-100;

}

// move moves the position of the cookie image relative to
// it's current location. 
// positive xinc will move to the right (neg to the left)
// positive yinc will move down (neg up)

function move( xinc, yinc ) {

    var jsize=20;
    var x,y;


    // ie reports position with "px" units, we gotta get rid of this
    // and make sure our variables are numbers to javascript  
    x = document.getElementById("cookielayer").style.left;
    y = document.getElementById("cookielayer").style.top;
    x = x.replace(/px/,""); x=x*1.0;
    y = y.replace(/px/,""); y=y*1.0;

    x=x-100;
    y=y-100;

    var xnew = x + xinc * jsize;
    var ynew = y + yinc * jsize;

    if ( ( xnew >= 10 ) && ( xnew <= 290) ){
       x = xnew;
    }
    if ( ( ynew >= 10 ) && ( ynew <= 290) ){
       y = ynew;
    }
    x=x+100;
    y=y+100;
    
    document.getElementById("cookielayer").style.top=y+"px";
    document.getElementById("cookielayer").style.left=x+"px";
    updatecoords();
}

function setcoords() {
    var x = document.forms["frm"].xcoord.value;
    var y = document.forms["frm"].ycoord.value;

    x=x+100;
    y=y+100;	

    if ((x>=10)&&(x<=290)&&(y>=10)&&(y<=290)) {
	document.getElementById("cookielayer").style.top=y+"px";
	document.getElementById("cookielayer").style.left=x+"px";
    }
    updatecoords();
}


// random jump to anywhere in the playing field

function hjump() {
    xpos = Math.random() * 280 + 110;
    ypos = Math.random() * 280 + 110;

    document.getElementById("cookielayer").style.top=ypos+"px";
    document.getElementById("cookielayer").style.left=xpos+"px";

    updatecoords();
}

// called when the user clicks on the cookie image
function catchcookie() {
    alert("you got me!");
    running=0;
}
// variable used to keep track of when the game is running
var running=0;

// start up the game 
function hyperspace_game() {
    running=1;
    alert("catch the cookie by clicking on it!");
    hyperspace_move();
}

// stop the game
function stop_hyperspace_game() {
    running=0;
}

// make a single game move by moving the image to a random
// location and then setting up to call this routine again
// after some delay. the delay before the next call is 
// based on the value of the speed field (the user can change).
function hyperspace_move() {
    var delay = document.forms["frm"].speed.value;
    if (running == 1) {
        hjump();
        window.setTimeout("hyperspace_move()",delay);
    }
}

</script>

<table  height="380" border="2" style="position: absolute; top:100; left:100">
  <tr>
   <td width="380" bgcolor="white"></td>
   <td bgcolor="cyan">
     <form id="frm">
       <p style="text-align:center">Move the cookie</p>
       <table align="center">

        <tr align="center">
          <td> </td>
          <td><input type="button" id="up"  value="up" onclick="move(0,-1)" 
             style="width:50; height:30; font-weight:bold;"  />
          </td>
          <td> </td>
        </tr>

        <tr align="center">
          <td><input type="button" id="left" value="left" onclick="move(-1,0)"
               style="width:50; height:30; font-weight:bold;"  />
          </td>
          <td> </td>
          <td><input type="button" id="right" value="right" onclick="move(1,0)"
             style="width:50; height:30; font-weight:bold;"  />
          </td>
        </tr>

        <tr align="center">
         <td></td>
         <td><input type="button" id="down" value="down" onclick="move(0,1)"
             style="width:50; height:30; font-weight:bold;"  />
         </td>
         <td></td>
        </tr>
       </table>

    <p style="text-align:center">
      <input type="button" id="jump" value="random jump" onclick="hjump()"
             style="width:100; height:30; font-weight:bold;"  />
    </p>

    <hr/>
    <p style="text-align:center">play the chase game</p>

    <p style="text-align:center">
      <input type="button" id="chase" value="start" onclick="hyperspace_game()"
             style="width:100; height:30; font-weight:bold;"  />

      <input type="button" id="chase" value="stop" onclick="stop_hyperspace_game()" 
             style="width:100; height:30; font-weight:bold;"  />
    </p>


    <p style="text-align:center">
      Speed: <input type="text" size="5" id="speed" /><br/>
      (msec. between jumps)
    </p>

    <hr/>

    <p style="text-align:center">
      Current Position:<br/>
      <input type="text" size="5" id="xcoord" onchange="setcoords()" />
      <input type="text" size="5" id="ycoord" onchange="setcoords()" />
    </p>

  </form>
</td></tr></table>


<div id="cookielayer" style="position: absolute; left:120; top:120">
<img onclick="catchcookie();" src="cookie.gif"  border="0" width="100" height="100" />
</div>

<div style="height: 5.0in">
</div>

<script>

// initialize the game speed
document.forms["frm"].speed.value=500;
updatecoords();

</script>