<style type="text/css"> td {font-size:12pt} body{ cursor:crosshair; } </style> <script language="javascript"> var animation=275; // var incr=8; // var minan=50; // var wy=55; // 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('Instructies:\n\n- Sla simpelweg de mol weer terug de grond in .\n- de snelheid en levels passen zich aan na iedere 5e mol.\n- Het spel stopt als je er 20 hebt gemist.\n- gebruik de cursor niet de hamer om ze te meppen.\n (De hamer is er alleen voor de show).\n- Om te pauzeren druk je op een willekeurige toest.\n\nDruk op "Ok" om weer verder te gaan.'); 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('Pause...\n\nDruk op "Ok" om verder te gaan.'); 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">Mollen geraakt :</td><td align="left">'+hit+'</td></tr><tr><td align="left">Mollen gemist:</td><td align="left">'+missed+'</td></tr><tr><td align="left">Aantal slagen:</td><td align="left">'+strikes+'</td></tr><tr><td align="left">Procentueel geslagen:</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> <!-- Dit zet je in de body van de pagina--> <div id="hammer" style="position:absolute; left:0px; top:-1000px; width:50px; height:50px; z-index:1000"><img src="up.gif" name="smash" width="50" height="50"></div> <div id="backdrop" style="position:absolute; top:-1000px; left:0px; width:500px; height:250px; z-index:2"><img src="scene.gif" border="3" width="500" height="250"></div> <div id="text" style="position:absolute; left:0px; top:-1000px; width:300px; height:100px; text-align:center"><table width="300"><tr><td> </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>