<HEAD>
<TITLE>EIW JavaScript Demo - Chase the Cookie</TITLE>
<STYLE>
DIV { position: absolute; top:10; left:10; }
</STYLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
// updatecoords writes the current coordinates of the layer
// holding the cookie image to the form fields xcoord and ycoord.
function updatecoords() {
document.frm.xcoord.value = document.cookielayer.pageX;
document.frm.ycoord.value = document.cookielayer.pageY;
}
// 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 = document.cookielayer.pageX;
var y = document.cookielayer.pageY;
var xnew = x + xinc * jsize;
var ynew = y + yinc * jsize;
if ( ( xnew >= 10 ) && ( xnew <= 290) ){
x = xnew;
}
if ( ( ynew >= 10 ) && ( ynew <= 290) ){
y = ynew;
}
document.cookielayer.moveToAbsolute(x,y);
updatecoords();
}
function setcoords() {
var x = document.frm.xcoord.value;
var y = document.frm.ycoord.value;
if ((x>=10)&&(x<=290)&&(y>=10)&&(y<=290)) {
document.cookielayer.moveToAbsolute(x,y);
}
updatecoords();
}
// random jump to anywhere in the playing field
function hjump() {
xpos = Math.random() * 280 + 10;
ypos = Math.random() * 280 + 10;
document.cookielayer.moveToAbsolute(xpos,ypos);
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.frm.speed.value;
if (running == 1) {
hjump();
setTimeout("hyperspace_move()",delay);
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=gray>
<Layer Name=cookielayer top=10 left=10>
<A HREF=foo onClick="catchcookie(); return(false)">
<IMG SRC=cookie.gif BORDER=0 ISMAP WIDTH=100 HEIGHT=100 ></A>
</LAYER>
<TABLE HEIGHT=380 BORDER=2><TR><TD WIDTH=380 BGCOLOR=WHITE> </TD>
<TD BGCOLOR=CYAN>
<FORM Name=frm>
<CENTER>Move the cookie</CENTER><BR>
<TABLE>
<TR ALIGN=CENTER>
<TD> </TD>
<TD><INPUT TYPE=BUTTON Name=up WIDTH=50 Value="Up" onClick="move(0,-1)"></TD>
<TD> </TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=left Value="Left" onClick="move(-1,0)"></TD>
<TD> </TD>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=right Value="Right" onClick="move(1,0)"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=down Value="Down" onClick="move(0,1)"></TD>
<TD> </TD>
</TR>
</TABLE>
<P>
<CENTER>
<INPUT TYPE=BUTTON Name=jump Value="Random Jump" onClick="hjump()">
</CENTER>
<HR>
<CENTER>Play the chase game</CENTER><BR>
<CENTER>
<INPUT TYPE=BUTTON WIDTH=70 Name=chase Value="Start" onClick="hyperspace_game()">
<INPUT TYPE=BUTTON WIDTH=70 Name=chase Value="Stop" onClick="stop_hyperspace_game()">
</CENTER>
<BR>
Speed: <INPUT TYPE=TEXT SIZE=5 Name=speed><BR>
<CENTER>(msec. between jumps)</CENTER>
<HR>
<CENTER>Current Position:<CENTER><BR>
<INPUT TYPE=TEXT SIZE=5 Name=xcoord onChange="setcoords()">
<INPUT TYPE=TEXT SIZE=5 Name=ycoord onChange="setcoords()">
</FORM>
</TD>
</TR></TABLE>
<SCRIPT>
// Initialize the game speed
document.frm.speed.value=500;
updatecoords();
</SCRIPT>
|