<!--

/* This script causes a sprite to chase your mouse. Put this script and chase.gif in the same directory with your document. Add <script src="chase.js"></script> to the head of your document, and add onclick="start()" to the element you want to click on to make the sprite appear. Click on the sprite to make him disappear. */

function xy(x,y,c,d,dx,dy)
{
 this.x=x;
 this.y=y;
 this.c=c;
 this.d=d;
 this.dx=dx;
 this.dy=dy;
}
var sprite; // sprite object
var spriteImg; // sprite image
var spriteX=256; // sprite position
var spriteY=-64;
var spriteW=64; // sprite size
var spriteH=64;
var frameOffset=0; // position of current frame
var speed; // array index for animation data
var mouseX; // click position
var mouseY;
var timerHandle; // used for timer interrupt
var move=new Array(); // animation control table
move[0]=new xy(0,512,256,256,0,0);
move[1]=new xy(64,0,512,100,-10,0);
move[2]=new xy(0,0,512,100,10,0);
move[3]=new xy(64,512,256,100,0,-8);
move[4]=new xy(64,512,256,100,0,8);

function drift()
{
 timerHandle=setTimeout("drift()",move[speed].d);
 spriteX+=move[speed].dx;
 spriteY+=move[speed].dy;
 frameOffset+=spriteH;
 if ((mouseX>=spriteX)&&(mouseX<spriteX+spriteW)) // on sprite column
 {
  if (mouseY<spriteY) {speed=3;} // above sprite
  if (mouseY>=spriteY+spriteH) {speed=4;} // below sprite
  if ((mouseY>=spriteY)&&(mouseY<spriteY+spriteH)) {speed=0;} // on sprite
 }
 else // off sprite column
 {
  if (mouseX<spriteX) {speed=1;} // left of sprite
  if (mouseX>=spriteX+spriteW) {speed=2;} // right of sprite
 }
 if (frameOffset>=move[speed].c) {frameOffset=0;} // Closes animation loop.
 sprite.style.left=spriteX;
 sprite.style.top=spriteY;
 spriteImg.style.left=-move[speed].x;
 spriteImg.style.top=-move[speed].y-frameOffset;
}

function getMouse()
{
 mouseX=document.body.scrollLeft+event.clientX;
 mouseY=document.body.scrollTop+event.clientY;
}

function stop()
{
 clearTimeout(timerHandle);
 document.onmousemove="";
 spriteImg.style.top=0;
 spriteImg.style.left=-128;
 vanish();
}

function start()
{
 if (sprite) {return;}
 sprite=document.createElement('<div style="position: absolute; overflow: hidden; left: '+spriteX+'; top: '+spriteY+'; width: '+spriteW+'; height: '+spriteH+'">');
 spriteImg=document.createElement('<img src="chase.gif" style="position: absolute; left: 0; top: 0; width: 192; height: 768">');
 sprite.appendChild(spriteImg);
 document.body.appendChild(sprite);
 mouseX=document.body.scrollLeft+event.clientX;
 mouseY=document.body.scrollTop+event.clientY;
 document.onmousemove=getMouse;
 sprite.onclick=stop;
 speed=4;
 spriteX=mouseX-spriteW/2;
 spriteY=document.body.scrollTop-spriteH;
 if(timerHandle) {clearTimeout(timerHandle);}
 drift();
}

function vanish()
{
 var b=spriteImg.style;
 var c=sprite.style.posHeight;
 if (b.posTop>-b.posHeight+c)
 {
  b.posTop-=c;
  timerHandle=setTimeout("vanish()",200);
 }
 else
 {
  document.body.removeChild(sprite);
  sprite=null;
 }
}

// -->
