Shoot the Rockets - V 2.5

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 BODY section of your page:
Select all...

var yoffset=60;                  // OFFSET OF GAME FROM TOP OF PAGE.
var rspeed=100;              // INITIAL DELAY OF ANIMATION OF ROCKETS (LOWER IS FASTER)
var step=5;                       // PIXEL INCREMENTS PER DELAY CYCLE OF ROCKETS (HIGHER IS FASTER)
var bspeed=200;              // SPEED OF BULLETS (LOWER IS FASTER)
var bgpic="space.jpg";   // BACKGROUND IMAGE

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 py=0, px=0, xoffset, loaded=false;
var target, field, rocket=new Array(), bullet, explosion, outer, id1, id2, id3, id4;
var oktoshoot=false, bulletlevel, missed=0, fired=0, hit=0, accuracy=0, level=1;
var basic='visibility="visible" width="60" top="-100" height="15"'
var txt='';

if(ns4){
txt+='<layer name="outer" visibility="visible" width="500" height="300">';
txt+='<layer  width="500" height="300"  visibility="hidden" z-index="1" name="field" bgcolor="black"><table  cellpadding=0 cellspacing=0 border=0 width=500 height=300 background="'+bgpic+'"><tr><td> </td></tr></table></layer>';
txt+='<layer name="target" visibility="hidden" z-index="12"><img src="target.gif"></layer>';
txt+='<layer name="explosion" '+basic+'z-index="11"><img src="explosion.gif"></layer>';
txt+='<layer name="rocket1" '+basic+'left="-460" z-index="4"><img src="rocket.gif"></layer>';
txt+='<layer name="rocket2" '+basic+'left="-380" z-index="5"><img src="rocket.gif"></layer>';
txt+='<layer name="rocket3" '+basic+'left="-300" z-index="6"><img src="rocket.gif"></layer>';
txt+='<layer name="rocket4" '+basic+'left="-220" z-index="7"><img src="rocket.gif"></layer>';
txt+='<layer name="rocket5" '+basic+'left="-140" z-index="8"><img src="rocket.gif"></layer>';
txt+='<layer name="rocket6" '+basic+'left="-60" z-index="9"><img src="rocket.gif"></layer>';
txt+='<layer name="bullet" visibility="visible" width="16" top="-3000" height="16" bgcolor="white" z-index="10"></layer>';
txt+='</layer>';
}else{
txt+='<div id="outer" style="position:absolute; width:600px; height:300px; overflow:hidden">';
txt+='<div id="field" style="position:absolute; top:0px; left:0px; visibility:hidden; width:500px; height:300px; z-index:2; background-color:black; background-image:url(\''+bgpic+'\')"></div>';
txt+='<div id="target" style="position:absolute; visibility:hidden; z-index:12; height:59px; width:59px;"><img src="target.gif"></div>';
txt+='<div id="explosion" style="z-index:11;" class="basic"><img src="explosion.gif"></div>';
txt+='<div id="rocket1" style="left:-460px; z-index:4" class="basic"><img src="rocket.gif"></div>';
txt+='<div id="rocket2" style="left:-380px; z-index:5" class="basic"><img src="rocket.gif"></div>';
txt+='<div id="rocket3" style="left:-300px; z-index:6" class="basic"><img src="rocket.gif"></div>';
txt+='<div id="rocket4" style="left:-220px; z-index:7" class="basic"><img src="rocket.gif"></div>';
txt+='<div id="rocket5" style="left:-140px; z-index:8" class="basic"><img src="rocket.gif"></div>';
txt+='<div id="rocket6" style="left:-60px; z-index:9" class="basic"><img src="rocket.gif"></div>';
txt+='<div id="bullet" style="z-index:10; background-color:white; width:16px; height:16px; font-size:1px;" class="basic"></div>';
txt+='</div>';
}

document.write(txt);

//********** UTILITY FUNCTIONS **********\\

function getid(name){
if(ns4)return document.layers['outer'].document.layers[name];
else if(ie4)return document.all[name];
else return document.getElementById(name);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function showid(id){
if(ns4)id.visibility = "show";
else id.style.visibility = "visible";
}

function clipid(id, ct, cr, cb, cl){
if(ns4){
id.clip.left=cl;
id.clip.top=ct;
id.clip.right=cr;
id.clip.bottom=cb;
}
else id.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}

function moveidleftto(id,x){
if(ns4)id.left=x;
else id.style.left=x+'px';
}

function moveidtopto(id,y){
if(ns4)id.top=y;
else id.style.top=y+'px';
}

function moveidleftby(id,dx){
if(ns4)id.moveBy(dx, 0);
else id.style.left=(getidleft(id)+dx)+'px';
}

function moveidto(id,x,y){
if(ns4)id.moveTo(x,y);
else {
id.style.left=x+'px';
id.style.top=y+'px';
}}

//********** GAME CODE **********\\

function init(){
target=getid('target');
field=getid('field');
for(i=1;i<=6;i++)rocket[i]=getid('rocket'+i);
bullet=getid('bullet');
explosion=getid('explosion');
outer= (ns4)? document.layers['outer'] : (ie4)? document.all['outer'] : document.getElementById('outer');
resize();
if(ns4)document.captureEvents(Event.KEYPRESS | Event.MOUSEMOVE | Event.MOUSEDOWN);
document.onkeypress=getkeypress;
document.onmousemove=movetarget;
document.onmousedown=fire;
window.onresize=resize;
showid(target);
showid(field);
alert('INSTRUCTIONS:\n\n- Try to hit the rockets before they reach the other side.\n- Fire the "gun" a little ahead of time to compensate for distances.\n- Simply target the rockets with the mouse and then click to fire the gun.\n- Difficulty increases after every 5th rocket hit.\n- Press the "P" key to pause the game and to show your stats.\n- Look in the status bar to see your current level.\n\nPress "Ok" to start....');
loaded=true; oktoshoot=true;
displevel();
animate();
}

function displevel(){
status="You are on level: "+level;
if(missed>=20){
clearTimeout(id1); clearTimeout(id2); clearTimeout(id3); clearTimeout(id4);
showstat('Game Over...\n\nYou missed 20 rockets out of '+(hit+missed)+'\n\nPress "Ok" to start a new game...\n\n');
history.go(0);
}else id2=setTimeout('displevel()', 100);
}

function showstat(bmssg){
accuracy=Math.round(hit/fired*100);
if(isNaN(accuracy))accuracy=0;
alert(bmssg+'Level: '+level+'\nShots fired: '+fired+'\nRockets destroyed: '+hit+'\nShots missed: '+(fired-hit)+'\nRockets that made it across: '+missed+'\nShot accuracy: '+accuracy+'%');
}

function testandmoveX(rN){
var rleft=getidleft(rocket[rN]);
var rtop=getidtop(rocket[rN]);
clipid( rocket[rN], 0, 500-step-rleft, 15, -rleft-step);
if(rleft+step>500){
moveidleftto(rocket[rN] , -60 );
if(rtop!=-100)missed++;
}else moveidleftby(rocket[rN] , step);
if(rleft<=-60)moveidtopto( rocket[rN], Math.floor(Math.random()*12)*20+30);
}

function animate(){
for(i=1;i<=6;i++)testandmoveX(i);
id1=setTimeout('animate()', rspeed);
}

function shootrocket(x,y){
fired++;
bulletlevel=4;
bullettime(x,y);
}

function resize(){
xoffset=(((ie4||ie5)? document.body.clientWidth:window.innerWidth)-500)/2;
moveidto(outer, xoffset, yoffset);
}

function fire(mouse){
if(oktoshoot){
oktoshoot=false;
shootrocket(getidleft(target)+30, getidtop(target)+30);
}}

function getkeypress(keypress){
keyp=(ie4||ie5)? window.event.keyCode : keypress.which;
if(keyp==112){
clearTimeout(id1);
showstat('Game Paused...\n\nPress "Ok" to continue.\n\n');
id1=setTimeout('animate()' , rspeed);
}
return false;
}

window.onload=init;

</script>

3: Adjust the few settings in the top of the script to suit your needs. There are explanations there.