Dodge 'Em 2
Installation Instructions:
1: Copy and paste the following style declaration in the HEAD section of your page:
Select all...
<style type="text/css"> .bckgnd {position:absolute; visibility:visible; left:0px; top:-300px; z-index:1; width:500px; height:250px} .driver {position:absolute; visibility:visible; left:0px; top:-300px; z-index:10; width:90px; height:59px;} .obj {position:absolute; visibility:visible; left:0px; top:-300px; z-index:2; width:90px; height:59px;} .crash {position:absolute; visibility:visible; left:0px; top:-300px; z-index:100; width:90px; height:59px;} </style>
Copy and paste the following script in the HEAD section of your page:
Select all...
<script language="javascript"> var yoffset=60; 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 speed=300, hitcount=1, randcar=0, oktoanimate=true, oktotestcrash=true, okmouse=true; var car, road, crash, xcntr,aid=0; var drive=new Array(); var ycoords=[47,58,68,83,99,122,144,172,200]; var xcoords=[ [-57,-25,5,37], [-67,-31,5,42], [-78,-36,6,48], [-91,-43,6,57], [-105,-50,6,64], [-126,-60,6,74], [-148,-70,6,84], [-171,-80,7,97], [-194,-91,7,112] ]; var cararray=[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]; var carimages=new Array(); for(p=1;p<=4;p++){ carimages[p]=new Image(); carimages[p].src='drive'+p+'.gif'; } function animate(){ if(oktoanimate){ randcar++; for(j=8;j>0;j--)cararray[j]=cararray[j-1]; if(randcar==3){ randcar=0; cararray[0]=[Math.floor(Math.random()*4) , Math.floor(Math.random()*4)+1]; }else cararray[0]=[0,0]; for(y=1;y<=9;y++){ var yc=(cararray[y-1][1]==0)? -100-yoffset : ycoords[y-1]; moveidto( drive[y], xcoords[y-1][cararray[y-1][0]] , yc); if(ns4)drive[y].document.images['p'+y].src='drive'+cararray[y-1][1]+'.gif'; else document.images['p'+y].src='drive'+cararray[y-1][1]+'.gif'; } if(speed>=80)speed-=1; aid=setTimeout('animate()', speed); }} function testcrash(){ if(oktotestcrash){ var carx=(ns4)? car.left-xcntr : parseInt(car.style.left)-xcntr; var p8=cararray[8][0]; var p7=cararray[7][0]; if( ((cararray[7][1]!=0)&&(carx<=xcoords[8][p7]+80)&&(carx>=xcoords[8][p7]-80)) || ((cararray[8][1]!=0)&&(carx<=xcoords[8][p8]+80)&&(carx>=xcoords[8][p8]-80))) { oktotestcrash=false; okmouse=false; oktoanimate=false; if(ns4)crash.moveTo(car.left,car.top-40); else{ crash.style.top=parseInt(car.style.top)-40+'px'; crash.style.left=car.style.left; } status='You\'ve crashed '+(hitcount++)+' times.'; setTimeout('okmouse=true',1000); setTimeout('resume()',1500); }else setTimeout('testcrash()',100); }} function resume(){ (ns4)?crash.top=-100 : crash.style.top=-100+'px'; if(cararray[8] != [0,0]){ (ns4)?drive[1].top=-100 : drive[1].style.top=-100+'px'; cararray[8]=[0,0]; } if(cararray[7] != [0,0]){ (ns4)?drive[2].top=-100 : drive[2].style.top=-100+'px'; cararray[7]=[0,0]; } okmouse=true; oktoanimate=true; oktotestcrash=true; animate(); testcrash(); } function moveidto(id,x,y){ if(ns4)id.moveTo(x+xcntr,y+yoffset); else{ id.style.left=x+xcntr+'px'; id.style.top=y+yoffset+'px'; }} function trckmse(evt){ cx=(ie4||ie5)? event.clientX:evt.pageX; if((cx<=xcntr+164)&&(cx>=xcntr-156)&&okmouse)moveidto(car, cx-47-xcntr, 200); return false; } function resize(){ xcntr=(ie4||ie5)? document.body.clientWidth:window.innerWidth; var wh=(ie4||ie5)? document.body.clientHeight:window.innerHeight; if((wh<450) || (xcntr<600))window.resizeTo(620,470); xcntr=xcntr/2; moveidto(car, 0, 200); moveidto(road, -250, 0); } function getid(id){ if(ns4) return findlayer(id,document); else if(ie4)return document.all[id]; else return document.getElementById(id); } // FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALL function findlayer(name,doc){ var i,layer; for(i=0;i
0)if((layer=findlayer(name,layer.document))!=null)return layer; } return null; } function getkeypress(keypress){ keyp=(ie4||ie5)? event.keyCode:keypress.which; if(keyp==112){ oktoanimate=false; clearTimeout(aid); alert('Game Paused....\n\nPress "OK" to continue.'); oktoanimate=true; animate(); } return false; } window.onresize=function(){ if(ns4)setTimeout('history.go(0)',400); else resize(); } window.onload=function(){ for(i=1;i<=36;i++)drive[i]=getid('drive'+i); car=getid('car'); road=getid('road'); crash=getid('crash'); if(ns4)document.captureEvents(Event.MOUSEMOVE | Event.KEYPRESS); document.onmousemove=trckmse; document.onkeypress=getkeypress; resize(); alert('INSTRUCTIONS:\n\n- Use the mouse to navigate the car around other cars.\n- Press "P" to pause the game.\n\nPress "Ok" when ready...'); status="You\'ve crashed 0 times"; animate(); testcrash(); } </script>
3: Copy and paste the following HTML in the BODY section of your page:
Select all...
4: There is a "yoffset" variable at the top of the script you can use to set how far down the page the game starts. A setting of 0 sets the game right at the top, bigger numbers push the game down the page. The horizontal position is always centered.
5: If you have page content after the game, you'll have to add a bunch of linebreak tags ( <BR> ) or something to give the game enough "whitespace".