📄 cookie.html

📁 this gives details of the network programming
💻 HTML
字号:
<HEAD>
<TITLE>Netprog JavaScript Demo - Chase the Cookie</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
// 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);
    }
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=gray>

<DIV id=cookielayer style="position: absolute; left:20; top:20">

<A HREF=foo onClick="catchcookie(); return(false)">
<IMG SRC=cookie.gif  BORDER=0 ISMAP WIDTH=100 HEIGHT=100 ></A>
</DIV>


<TABLE HEIGHT=380 BORDER=2><TR><TD WIDTH=380 BGCOLOR=WHITE>&nbsp</TD>
<TD BGCOLOR=CYAN>
<FORM Name=frm>

<CENTER>Move the cookie</CENTER><BR>
<TABLE>
<TR ALIGN=CENTER>
  <TD>&nbsp</TD>
  <TD><INPUT TYPE=BUTTON Name=up  WIDTH=50 Value="Up" onClick="move(0,-1)"></TD>
  <TD>&nbsp</TD>
</TR>

<TR>
<TD><INPUT TYPE=BUTTON WIDTH=50 Name=left Value="Left" onClick="move(-1,0)"></TD>
<TD>&nbsp</TD>
<TD><INPUT TYPE=BUTTON  WIDTH=50 Name=right Value="Right" onClick="move(1,0)"></TD>
</TR>

<TR>
  <TD>&nbsp</TD>
  <TD><INPUT TYPE=BUTTON  WIDTH=50 Name=down Value="Down" onClick="move(0,1)"></TD>
  <TD>&nbsp</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>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -