📄 cookie_source.html
字号:
<HEAD><TITLE>Source for Chase the Cookie</TITLE><LINK rel=stylesheet type=text/css HREF=../../style/jsdemo.css></HEAD><BODY BGCOLOR=#CCCCCC MARGINHEIGHT=0 MARGINWIDTH=0 TOPMARGIN=0 LEFTMARGIN=0><TABLE bgColor=#8899aa border=0 cellPadding=4 cellSpacing=0 width=100%> <TR> <TD class=title>  NetProg 2002: Source for Chase the Cookie </TD> </TR> <TR bgColor=black height=10><TD CLASS=menu> </TD></TR></TABLE><DIV CLASS=page><BR><BR><P><CENTER><TABLE BORDER=0 BGCOLOR=#8899aa CELLPADDING=5><TR><TD><TABLE bgcolor=white BORDER=0 CELLPADDING=10><TR><TD><PRE class=codebox><HEAD>
<TITLE>Netprog JavaScript Demo - Chase the Cookie</TITLE>
<SCRIPT LANGUAGE=JavaScript><SPAN CLASS=code>
<!--
// Find out what kind of browser we are
// This was originally Netscape only (using layers), now it supports
// both IE and netscape
if (navigator.appName == "Microsoft Internet Explorer") {
ie=true;
} else {
ie=false;
}
// updatecoords writes the current coordinates of the layer
// holding the cookie image to the form fields xcoord and ycoord.
function updatecoords() {
var x,y;
if (ie){
// IE reports position with "px" units, we gotta get rid of this
// and make sure our variables are numbers to Javascript
x = document.all["cookielayer"].style.left;
y = document.all["cookielayer"].style.top;
x = x.replace(/px/,""); x=x*1.0;
y = y.replace(/px/,""); y=y*1.0;
} else {
x = document.cookielayer.pageX;
y = document.cookielayer.pageY;
}
document.frm.xcoord.value = x;
document.frm.ycoord.value = y;
}
// 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;
if (ie) {
// ie reports coords with "px" attached so we gotta remove it
// before doing math...
x = document.all["cookielayer"].style.left;
x = x.replace(/px/,"");
y = document.all["cookielayer"].style.top;
y = y.replace(/px/,"");
// force to numbers
x = x * 1.0;
y = y * 1.0;
} else {
x = document.cookielayer.pageX;
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;
}
if (ie) {
document.all["cookielayer"].style.top=y+"px";
document.all["cookielayer"].style.left=x+"px";
} else {
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)) {
if (ie) {
document.all["cookielayer"].style.top=y+"px";
document.all["cookielayer"].style.left=x+"px";
} else {
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;
if (ie) {
document.all["cookielayer"].style.top=ypos+"px";
document.all["cookielayer"].style.left=xpos+"px";
} else {
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);
}
}
// -->
</SPAN></SCRIPT>
</HEAD>
<BODY BGCOLOR=gray>
<DIV id=cookielayer style="position: absolute; left:20; top:20">
<A HREF=foo onClick="<SPAN CLASS=code>catchcookie(); return(false)</SPAN>">
<IMG SRC=cookie.gif BORDER=0 ISMAP WIDTH=100 HEIGHT=100 ></A>
</DIV>
<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="<SPAN CLASS=code>move(0,-1)</SPAN>"></TD>
<TD> </TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=left Value="Left" onClick="<SPAN CLASS=code>move(-1,0)</SPAN>"></TD>
<TD> </TD>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=right Value="Right" onClick="<SPAN CLASS=code>move(1,0)</SPAN>"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=down Value="Down" onClick="<SPAN CLASS=code>move(0,1)</SPAN>"></TD>
<TD> </TD>
</TR>
</TABLE>
<P>
<CENTER>
<INPUT TYPE=BUTTON Name=jump Value="Random Jump" onClick="<SPAN CLASS=code>hjump()</SPAN>">
</CENTER>
<HR>
<CENTER>Play the chase game</CENTER><BR>
<CENTER>
<INPUT TYPE=BUTTON WIDTH=70 Name=chase Value="Start" onClick="<SPAN CLASS=code>hyperspace_game()</SPAN>">
<INPUT TYPE=BUTTON WIDTH=70 Name=chase Value="Stop" onClick="<SPAN CLASS=code>stop_hyperspace_game()</SPAN>">
</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="<SPAN CLASS=code>setcoords()</SPAN>">
<INPUT TYPE=TEXT SIZE=5 Name=ycoord onChange="<SPAN CLASS=code>setcoords()</SPAN>">
</FORM>
</TD>
</TR></TABLE>
<SCRIPT><SPAN CLASS=code>
// Initialize the game speed
document.frm.speed.value=500;
updatecoords();
</SPAN></SCRIPT>
</PRE></TD></TR></TABLE></TD></TR></TABLE></CENTER></DIV>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -