»
EnglishFrenchVietnamese

Print - Whack the Gopher - JavaScriptBank.com

Full version: jsB@nk » Game » Whack the Gopher
URL: https://www.javascriptbank.com/whack-the-gopher-index.html

Whack the Gopher © JavaScriptBank.comSmack the gophers on the head as they come out of their holes. Speed and level will increase on every 5th gopher. Game ends when you miss 20 gophers. Use the mouse cursor, not the hammer, to target the gophers(the hammer is just for show). Press any keyboard key to pause the game. Press 'Ok' to start the game.

Full version: jsB@nk » Game » Whack the Gopher
URL: https://www.javascriptbank.com/whack-the-gopher-index.html



CSS
<style type="text/css">td {font-size:9pt}body{cursor:crosshair;background-color:white;font-size:10pt;font-family:sans-serif;color:#00436e;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="javascript">var animation=275;     // STARTING ANIMATION SPEED IN MILLISECONDSvar incr=8;            // THE INCREASE IN ANIMATION SPEED PER LEVEL IN MILLISECONDSvar 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='<table cellpadding="2" cellspacing="0" border="0" width="250"><tr><td align="left" width="190">Level:</td><td align="left" width="60">'+level+'</td></tr><tr><td align="left">Gophers hit:</td><td align="left">'+hit+'</td></tr><tr><td align="left">Gophers missed:</td><td align="left">'+missed+'</td></tr><tr><td align="left">Mallet hits:</td><td align="left">'+strikes+'</td></tr><tr><td align="left">Hit Accuracy:</td><td align="left">'+per+' %</td></tr></table>';if(ns4){text.document.open();text.document.write('<div style="position:absolute; left:0px; top:0px;">'+tmptxt+'</div>');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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div id="hammer" style="position:absolute; left:0px; top:-1000px; width:50px; height:50px; z-index:1000"><img src="up.gif"  name="smash"></div><div id="backdrop" style="position:absolute; top:-1000px; left:0px; width:500px; height:250px; z-index:2"><img src="scene.gif" border="3"></div><div id="text" style="position:absolute; left:0px; top:-1000px; width:300px; height:100px; text-align:center"><table width="300"><tr><td>&nbsp;</td></tr></table></div><div id="g1" style="position:absolute; top:-100px; left:0px;z-index:10; width:20px; height:30px"><img src="gopher.gif" width="20" height="30"></div><div id="g2" style="position:absolute; top:-100px; left:0px;z-index:11; width:20px; height:30px"><img src="gopher.gif" width="20" height="30"></div><div id="g3" style="position:absolute; top:-100px; left:0px;z-index:12; width:20px; height:30px"><img src="gopher.gif" width="20" height="30"></div><div id="g4" style="position:absolute; top:-100px; left:0px;z-index:13; width:30px; height:45px"><img src="gopher.gif" width="30" height="45"></div><div id="g5" style="position:absolute; top:-100px; left:0px;z-index:14; width:30px; height:45px"><img src="gopher.gif" width="30" height="45"></div><div id="g6" style="position:absolute; top:-100px; left:0px;z-index:15; width:30px; height:45px"><img src="gopher.gif" width="30" height="45"></div><div id="g7" style="position:absolute; top:-100px; left:0px;z-index:16; width:30px; height:45px"><img src="gopher.gif" width="30" height="45"></div><div id="g8" style="position:absolute; top:-100px; left:0px;z-index:17; width:40px; height:60px"><img src="gopher.gif" width="40" height="60"></div><div id="g9" style="position:absolute; top:-100px; left:0px;z-index:18; width:40px; height:60px"><img src="gopher.gif" width="40" height="60"></div><div id="g10" style="position:absolute; top:-100px; left:0px;z-index:19; width:40px; height:60px"><img src="gopher.gif" width="40" height="60"></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/game/Whack_the_Gopher/down.gifhttp://javascriptbank.com/javascript/game/Whack_the_Gopher/gopher.gifhttp://javascriptbank.com/javascript/game/Whack_the_Gopher/scene.gifhttp://javascriptbank.com/javascript/game/Whack_the_Gopher/up.gif