<script>

// move moves the position of the window
// 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;
    window.moveBy(jsize*xinc,jsize*yinc);
}

// random jump to anywhere

function hjump() {
    xpos = Math.random() * 600
    ypos = Math.random() * 200
    window.moveTo(xpos,ypos);
}

// variable used to keep track of when the game is running
var running=0;

// start up the game 
function hyperspace_game() {
    running=1;
    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 (delay < 500) {
        document.forms["frm"].speed.value = 500;
    }
    if (running == 1) {
        hjump();
        window.setTimeout("hyperspace_move()",delay);
    }
}

document.onUnload="restore();";
</script>


<table height="380" width="200" border="2">
<tr><td bgcolor="cyan">

<form id="frm">

<p style="text-align:center">Move the Browser</p>

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

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

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

</p>

<hr />
<h3 style="text-align:center">Play the chase game</h3>

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

<p style="text-align:center">
Speed : <input type="text" size="5" id="speed" />
</p>

<hr />
</form>

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

<script>
// save the initial window size (so we can restore it)
savewidth =  window.innerWidth;
saveheight = window.innerHeight;

function restore() {
  // change the window size to the original values
  window.innerWidth=savewidth;
  window.innerHeight=saveheight;
  window.resizeTo(savewidth,saveheight);
}


// change the window size to hold the controls only
//window.innerwidth=220;
//window.innerheight=550;

window.resizeTo(300,900);

// initialize the game speed field to 2000
document.forms["frm"].speed.value=2000;
</script>