Whack the Gopher

Smack 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.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

Installation Instructions:

1: Copy and paste the following style declaration in the HEAD section of your page:
Select all...

2: Copy and paste the following script in the HEAD section of your page:
Select all...

//******** 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 getid(id){
if(ns4) return document.layers[id];
else if(ie4)return document.all[id];
else return document.getElementById(id);
}

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 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.