Whack-a-Gopher
Installation Instructions:
1: Copy and paste the following style declaration in the HEAD section of your page:
Select all...
<style type="text/css"> td { font-size:9pt; } body { cursor:crosshair; } </style>
2: Copy and paste the following script in the HEAD section of your page:
Select all...
<script language="javascript"> var animation=275; // STARTING ANIMATION SPEED IN MILLISECONDS var incr=8; // THE INCREASE IN ANIMATION SPEED PER LEVEL IN MILLISECONDS var minan=50; // MINIMUM DELAY (MAX ANIMATION SPEED) ALLOWED IN MILLISECONDS. var wy=55; // OFFSET FROM TOP OF PAGE. SET THIS TO HIGHER VALUE IF YOU HAVE A "BANNER" SITE. //******** DO NOT EDIT BEYOND THIS POINT ********// var w3c=(document.getElementById)?true:false; var ns4=(document.layers)?true:false; var ie4=(document.all && !w3c)?true:false; var ie5=(document.all && w3c)?true:false; var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false; var gophers=new Array(), backdrop, hammer, text , gx , wx , smash; var hit=0, strikes=0, missed=0, counter=0, id=0, level=1, oktoplay=true, currentG=0; var xcoords=[0,110,240,370,76,182,288,394,95,230,365]; var ycoords=[0,58,58,58,105,105,105,105,178,178,178]; var gwidths=[0,20,20,20,30,30,30,30,40,40,40]; var gheights=[0,30,30,30,45,45,45,45,60,60,60]; var cache=new Array(); cache[0]=new Image(); cache[0].src="down.gif"; cache[1]=new Image(); cache[1].src="up.gif"; cache[2]=new Image(); cache[2].src="down.gif"; function init(){ backdrop=getid('backdrop'); hammer=getid('hammer'); smash=(ns4)? document.layers['hammer'].document.images['smash'] : document.images['smash']; text=getid('text'); updatescore(); wx=(ie4||ie5)?document.body.clientWidth:window.innerWidth; moveidto( backdrop, (wx-500)/2, wy); moveidto( text, (wx-300)/2, wy+250+10); for(i=1;i<=10;i++){ gophers[i]=new gopher(i); clipelement(gophers[i].ID, 0 ,gophers[i].w, 5, 0); moveidto(gophers[i].ID , xcoords[i]+(wx-500)/2 , ycoords[i]+wy); } if(ns4)document.captureEvents(Event.MOUSEMOVE | Event.KEYPRESS | Event.MOUSEDOWN | Event.MOUSEUP); document.onmousemove=moveobj; document.onkeypress=pausegame; document.onmousedown=function(){ if(oktoplay)smack(); } document.onmouseup=function(){ smash.src="up.gif"; } window.onresize=function(){ if(ns4)setTimeout('history.go(0)',400); } alert('INSTRUCTIONS:\n\n- Simply smack the gophers as they come out of their holes.\n- Speed and level will increase on every 5th gopher.\n- Game ends when you miss 20 gophers.\n- Use the mouse cursor, not the hammer, to target the gophers.\n (The hammer is just for show).\n- Press any keyboard key to pause the game.\n\nPress "Ok" to start the game.'); getgophernum(); id=setInterval('animate()', animation); } function getid(id){ if(ns4) return document.layers[id]; else if(ie4)return document.all[id]; else return document.getElementById(id); } function gopher(i){ this.ID=getid('g'+i); this.ID.i=i; this.w=gwidths[i]; this.h=gheights[i]; this.ctr=0; this.step=this.h/5; this.up=true; this.clipamnt=5; if(ns4)this.ID.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); this.ID.onmouseover=function(){ currentG=this.i; } this.ID.onmouseout=function(){ currentG=0; }} function pausegame(){ clearInterval(id); alert('Game paused...\n\nPress "Ok" to continue.'); id=setInterval('animate()' , animation); } function updatescore(){ var per=(Math.floor((hit/strikes*1000))/10); if(isNaN(per))per='?'; var tmptxt='
Level:
'+level+'
Gophers hit:
'+hit+'
Gophers missed:
'+missed+'
Mallet hits:
'+strikes+'
Hit Accuracy:
'+per+' %
'; if(ns4){ text.document.open(); text.document.write('
'+tmptxt+'
'); text.document.close(); }else text.innerHTML=tmptxt; } function moveobj(evt){ var ex=(ie4||ie5)?event.clientX:evt.pageX; var ey=(ie4||ie5)?event.clientY:evt.pageY; moveidto(hammer,ex-10,ey-53); return false; } function smack(){ smash.src="down.gif"; strikes++; updatescore(); if(currentG!=0){ var gtmp=gophers[currentG]; if(gtmp.ctr!=0){ counter++; chkspeed(); clearInterval(id); moveidto(gophers[gx].ID , xcoords[currentG]+(wx-500)/2 , ycoords[currentG]+wy); clipelement(gophers[gx].ID, 0, gophers[gx].w, 5, 0); gophers[gx].ctr=0; gophers[gx].clipamnt=5; gophers[gx].up=true; getgophernum(); hit++; id=setInterval('animate()',animation); }}} function animate(){ var clipdir=(gophers[gx].up)? '+' : '-'; eval('gophers[gx].clipamnt'+clipdir+'='+gophers[gx].step); clipelement(gophers[gx].ID , 0 , gophers[gx].w , gophers[gx].clipamnt , 0); var ga=(gophers[gx].up)? -gophers[gx].step : gophers[gx].step; if(ns4)gophers[gx].ID.top=gophers[gx].ID.top+ga; else gophers[gx].ID.style.top=parseInt(gophers[gx].ID.style.top)+ga+'px'; gophers[gx].ctr++; if(gophers[gx].ctr==4)gophers[gx].up=false; if((gophers[gx].ctr==0)||(gophers[gx].ctr==8)){ clearTimeout(id); missed++; updatescore(); if(missed==20){ gophers[gx].ctr=0; oktoplay=false; alert('You made it to level '+level+'.\n\nClick "Ok" to try again'); history.go(0); }else{ gophers[gx].ctr=0; gophers[gx].clipamnt=5; gophers[gx].up=true; getgophernum(); counter++; chkspeed(); id=setInterval('animate()',animation); }}} function chkspeed(){ if((counter%5)==0){ if(animation>=minan)animation=animation-incr; level++; updatescore(); }} function moveidto(id,x,y){ if(ns4)id.moveTo(x,y); else{ id.style.left=x+'px'; id.style.top=y+'px'; }} function clipelement(id, ctop, cright, cbot, cleft){ if(ns4){ id.clip.left= cleft; id.clip.top=ctop; id.clip.right=cright; id.clip.bottom=cbot; } else id.style.clip='rect('+ctop+' '+cright+' '+cbot+' '+cleft+')'; } function getgophernum(){ gx=Math.floor(Math.random()*10)+1; } window.onload=init; </script>
3: Copy and paste the following HTML in the BODY section of your page:
Select all...
4: There are a few settings at the top of the script you can use to adjust how the game behaves and how far from the top edge the game is.
5: Note: If you must have page content after the game, you'll have to insert some linebreak tags ( <BR> ) or something to add whitespace so the game area doesn't cover the page content.