'Shoot the Popup Target' Games

This game script provides a highly customizable 'engine' to make different target-style games using different images, sounds, and other parameters. There are a lot of settings to adjust for each game, basically your imagination is the limit.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com Select the game you want to play and click the button.
A new window will open with the game you selected.

Overview

This game script provides a highly customizable "engine" to make different target-style games using different images, sounds, and other parameters. There are a lot of settings to adjust for each game, basically your imagination is the limit.

Basically, you have to fire your "weapon" at the various targets that pop out of different places. The game works in IE5+ and Netscape6+ (although there are no sounds in Netscape6), but not Netscape4. Most of the graphics in the examples above were created by my wife. This script was really designed for my youngest son to help develop his hand-eye coordination. So, if the graphics seem a bit "cartoony", that is the reason :)

Parameter Description:

All the parameters for the game are in the script itself near the top and are documented fairly well, but I'll go over each one for better understanding. The rest of the code is also fairly well documented in case you want to make changes.

Sound Parameters:
- var sounds=[ 'gunshot.wav' , 'reload.wav' , 'empty.wav' ];
  These parameters are for the sound files when the weapon is fired (in IE5+ only). The first one is for when you actually fire the weapon. The second and third array element are only used for when enableReload is enabled (more on this later). The second element is the sound when you reload your weapon and the third element is the sound for when you are out of ammo and need to reload the weapon. If enableReload is disabled, you can simply use empty strings as the url. The script also preloads these sounds.
Background Image Parameters:
- var gURL='background.jpg';
  This is the background image for the game playing area.
- var gWidth=600;
  This specifies the background image width regardless of actual image width.
- var gHeight=400;
  This specifies the background image height regardless of actual image height.
Weapon Image Parameters:
- var gunURL="gun.gif";
  This is the weapon image URL which you use to shoot the targets.
- var gunH=150;
  This specifies the weapon image height regardless of actual image height.
- var gunW=25;
  This specifies the weapon image width regardless of actual image width.
- var gunOffset=0;
  This specifies how far down from the cursor the weapon will appear. DO NOT USE NEGATIVE VALUES. The cursor will always appear horizontally centered with the weapon.
- var gCursor='crosshair';
  This specifies the cursor type. The crosshair works best as it functions well as a targeting aid. Use valid CSS values.
The Weapon "Blast" Parameters:
These parameters are for the gun blast effect at the end of the barrel. Basically there is the default image (usually blank) and the blast image which is visible for a brief time when the weapon is fired.
- var expBlURL="explode_blank.gif";
  The normally seen image. A blank image usually works best.
- var expURL="explode.gif";
  The "blast" image seen only when the weapon is fired.
- var expH=25;
  This specifies the "blast" image height regardless of actual image height. The width of this image is set by the gunW parameter.
- var expDelay=100;
  This specifies how long (in milliseconds) the "blast" is visible before it returns to the original image.
Weapon Reload and Ammunition Count Parameters:
- var enableReload=true;
  This enables (true) or disables (false) the reload feature. If enabled, you must "reload" your weapon after n shots. Also, the statusbar displays shots left when enabled. If disabled, you can fire as many times as you want.
- var shots=6;
  This specifies how many shots are allowed before you must reload. Used only when enableReload feature is enabled.
Other Game Parameters:
- var startSpeed=400;
  The starting animation speed (in milliseconds). Higher values are slower, lower values are faster.
- var maxSpeed=80;
  The maximum animation speed allowed (in milliseconds). No matter what level you get to, animation speed will never go faster than this value.
- var maxGotAway=20;
  This specifies the number of targets that "get away" before the game is over.
- var hitPerLev=5;
  This specifies how many targets you have to hit to advance to the next level.
- var speedPerLev=20;
  This is how much time (in milliseconds) decreases with each level to cause the game to get faster and faster.
- var statStyle="color:#F6E3C4; font-size:9pt; font-family:verdana";
  This is the style-sheet ruls, in CSS format, for the section just below the game area that keeps track of the various game statistics. This allows you to match the text to your page.
Target Parameters:

This is probably the most complex and time consuming part of adjusting the game for your application. The targets variable is basically an array containing sub-arrays. Each array element corresponds to one target, and each subarray contains all the individual parameters for that target. You can have as many or as few targets as you want, more targets makes the game harder and more interesting.

A typical target parameter set would look something like:

var targets=[
[ "target1.gif" , 127 , 156 , 48 , 90 , 2 ],
[ "target3.gif" , 103 , 268 , 45 , 90 , 1 ],
[ "target4.gif" , 209 , 389 , 60 , 110 , 2 ],
[ "target3.gif" , 700 , 415 , 45 , 85 , 1 ],
[ "target4.gif" , 277 , 292 , 40 , 75 , 1 ],
[ "target4.gif" , 356 , 459 , 20 , 40 , 1 ],
[ "target1.gif" , 580 , 110 , 15 , 40 , 3 ],
[ "target2.gif" , 656 , 288 , 20 , 30 , 3 ],
[ "target1.gif" , 628 , 110 , 15 , 40 , 3 ],
[ "target2.gif" , 107 , 410 , 55 , 85 , 3 ]
]

This example shows there are 10 seperate targets. The format for the parameters is:

[ "IMAGE_URL" , Xposition , Yposition , Width , Height , DIRECTION ]
- "IMAGE_URL"
  This is URL the target image.
- Xposition
  This is the horizontal pixel position of the top left corner of the image relative to the game background image.
- Yposition
  This is the vertical pixel position of the top left corner of the target image relative to the game background image. (Hint: Put your background image into a graphics editor and use the coordinates display to determine target placement.)
- Width
  This is the target image width regardless of actual image width. Due to the way the script works, this value MUST be a multiple of 5 (ex: 100, 205, 240, 35, etc...). If not, the script will round to the nearest multiple of 5.
- Height
  This is the target image height regardless of actual image height. Due to the way the script works, this value MUST be a multiple of 5. If not, the script will round to the nearest multiple of 5.
- DIRECTION
  This determines which direction the target will appear.
  1 = Moves to the left.
  2 = Moves to the right.
  3 = Moves upward.
  4 = Moves downward.

Take a look at the demos (use the list at the top of the page) and view the source code to see how I got the different effects.

Installation:

1: Copy and paste the following Javascript into the BODY section of your page:
Select all...

POPOUT TARGET SHOOTING GAME
BY: Brian Gosselin

THIS GAME IS HIGHLY CONFIGURABLE. THE BASIC "ENGINE" CAN BE USED IN OTHER
SIMILAR GAMES, JUST CHANGE THE PARAMETERS FOR A WHOLE NEW THEME.

READ THE DIRECTIONS PAGE DISTRIBUTED WITH THIS GAME FOR INSTRUCTIONS
ON HOW TO CONFIGURE ALL THE PARAMETERS.

NOTE: THIS GAME ONLY FULLY WORKS IN INTERNET EXPLORER 5+.
ONLY INTERNET EXPLORER BROWSERS WILL ALLOW SOUND EFFECTS.
THE GAME WILL ALSO WORK IN NS6 BROWSERS (BUT WITHOUT SOUND).
BUT WILL NOT WORK AT ALL IN NS4.

*******************************************************************/

// ARRAY OF SOUND EFFECTS FORMAT: [ "gunshot_sound" , "reload_gun_sound" , "empty_gun_sound" ]
// gunshot_sound = SOUND WHEN YOU FIRE THE GUN
// reload_gun_sound = SOUND WHEN YOU RELOAD THE WEAPON. USED ONLY WHEN enableReload ENABLED.
// empty_gun_sound = SOUND WHEN YOU FIRE THE GUN BUT THERE'S NO AMMO LEFT (NEEDS RELOAD). USED ONLY WHEN enableReload ENABLED.
var sounds=[ 'gunshot.wav' , 'reload.wav' , 'empty.wav' ];

// PARAMETERS FOR THE BACKGROUND IMAGE. REGARDLESS OF ACTUAL SIZE, IT WILL BE SCALED
// TO FIT THE HEIGHT/WIDTH PARAMETERS BELOW.
var gURL='background_pic.jpg';    //BACKGROUND FIELD IMAGE URL.
var gWidth=700;                   //BACKGROUND FIELD WIDTH.
var gHeight=500;                  //BACKGROUND FIELD HEIGHT.

// VARIOUS PARAMETERS FOR THE GUN IMAGE
var gunURL="weapon.gif";          //GUN PIC URL.
var gunH=100;                     //GUN PIC HEIGHT.
var gunW=50;                      //GUN PIC WIDTH.
var gunOffset=30;                 //VERTICAL OFFSET OF CURSOR FROM GUN TOP.
var gCursor='crosshair';          //CURSOR TYPE FOR THE GUN TARGET.

// THE "EXPLOSION AT THE END OF THE GUN PARAMETERS. IF NONE DESIRED, SET BOTH TO A BLANK IMAGE.
var expBlURL="blankpic.gif";       //THE BLANK GUN FIRE PIC.
var expURL="gunblast.gif";         //THE GUN FIRE PIC.
var expH=20;                       //THE GUN FIRE PIC HEIGHT. (WIDTH DETERMINED BY GUN WIDTH)
var expDelay=100;                  //THE TIME IN MILLISECONDS THE EXPLOSION IS VISIBLE.

// CONTROLS FOR THE GUN RELOAD AND SHOTS BETWEEN RELOADS
var enableReload=false;           //WHETHER YOU NEED TO RELOAD THE GUN AFTER n SHOTS.
var shots=6;                      //NUMBER OF ALLOWED SHOTS BEFORE RELOAD REQUIRED.

// MISC GAME PARAMETERS
var startSpeed=500;               //STARTING SPEED. STARTING DELAY BETWEEN ANIMATIONS IN MILLISECONDS. USE 500, 400, 300, 200, or 100.
var maxSpeed=80;                  //MAX ALLOWED SPEED. MIN DELAY BETWEEN ANIMATIONS IN MILLISECONDS.
var maxGotAway=20;                //MAX NUMBER OF TARGETS "THAT GOT AWAY" BEFORE GAME OVER.
var hitPerLev=10;                 //HITS REQUIRED FOR NEXT LEVEL.
var speedPerLev=20;               //ANIMATION SPEED DECREMENT IN MILLISECONDS BETWEEN EACH LEVEL.

// TEXT STYLE-SHEET RULE FOR THE GAME STATUS AREA IN CSS FORMAT.
var statStyle="color:black; font-size:9pt; font-family:sans-serif; font-weight:bold;";

// TARGET PARAMETERS BELOW:
// [ "PIC_URL", X, Y, Width, Height, SCROLL_DIR ]
// SCROLL_DIR: 1=SCROLL TO LEFT / 2=SCROLL TO RIGHT / 3=SCROLL UP / 4=SCROLL DOWN
// IMAGE WIDTH/HEIGHT PIXEL SIZE *MUST* BE IN MULTIPLES OF 5 (5, 10, 15, 20, 25, etc...).
// IF YOU DONT THE SCRIPT WILL ADJUST YOUR SETTINGS. THE IMAGE WILL BE SCALED TO THIS DIMENSION
// REGARDLESS OF ACTUAL IMAGE SIZE.

var targets=[
["pic1.gif",435,216,60,80,2],
["pic2.gif",48,356,65,95,1],
["pic3.gif",188,341,50,75,4],
["pic1.gif",145,139,60,80,4],
["pic2.gif",614,229,65,95,3],
["pic3.gif",495,326,50,75,3],
["pic3.gif",557,500,50,75,3]
]

//*****************************************************************\\
//*********************DO NOT EDIT PAST HERE***********************\\
//*****************************************************************\\

//VARIOUS VARIBALE DECLARATIONS
var ie=(document.all)?true:false;
var ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0)?true:false;
var hit=0;
var attempts=0;
var missed=0;
var currSpeed=0;
var hitEl;
var attemptsEl;
var missedEl;
var levelEl;
var accuracyEl;
var gun;
var playField;
var id1=0;
var tgts=new Array();
var shotsLeft=shots;
var keyTrap=false
var currEl='';
var ex=0;
var ey=0;
var sx=0;
var sy=0;

//ATTEMPTS TO PRELOAD THE SOUNDS AND IMAGES.
var s=new Array();
for(i=0;i<sounds.length;i++){
s[i]=new Image();
s[i].src=sounds[i];
}
s[s.length]=new Image();
s[s.length-1].src=expBlURL;

//FUNCTION TO HANDLE SOUND EVENTS. CURRENTLY SET FOR IE ONLY.
function doSound(elstr,aURL){
if(ie)document.all[elstr].src=aURL;
}

//ENSURES THE WIDTH AND HEIGHT VALUES FOR THE TARGETS ARE MULITPLES OF 5. IF NOT, ROUNDS TO THE
//NEAREST MULTIPLE OF 5.
for(i=0;i<targets.length;i++){
sx=targets[i][3];
targets[i][3]=((sx%5)<=3)? Math.floor(sx/5)*5 : Math.ceil(sx/5)*5;
sx=targets[i][4];
targets[i][4]=((sx%5)<=3)? Math.floor(sx/5)*5 : Math.ceil(sx/5)*5;
}
sx=0;

//RETRIEVES THE PLAYING FIELD HORIZONTAL COORDINATE. ESPECIALLY USEFUL FOR RELATIVELY POSITIONED ELEMENTS.
//BASED ON CODE FROM MIKE HALL OR BRAINJAR.COM
function getPageLeft(el){
var x=0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}

//RETRIEVES THE PLAYING FIELD VERTICAL COORDINATE. ESPECIALLY USEFUL FOR RELATIVELY POSITIONED ELEMENTS.
//BASED ON CODE FROM MIKE HALL OR BRAINJAR.COM
function getPageTop(el){
var y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}

//MOMENTARILY SHOWS THE GUN BLAST PIC AT THE END OF THE BARREL WHEN PLAYER SHOOTS THE WEAPON.
function showExp(){
document.images['gun_exp'].src=expURL;
setTimeout('document.images["gun_exp"].src="'+expBlURL+'"', expDelay);
}

//COMMANDS EXECUTED WHEN THE PLAYER FIRES THE GUN. CONTAINS CONDITIONALS TO TEST REMAINING SHOTS IF ENABLED
function shoot(){
if(enableReload){
shotsLeft--;
if(shotsLeft<0){
status='Shots Remaining: 0 (Press the Spacebar to reload...)';
doSound('sound',sounds[2]);
}else{
status='Shots Remaining: '+shotsLeft;
doSound('sound',sounds[0]);
showExp();
attempts++;
showStats();
}}else{
doSound('sound',sounds[0]);
showExp();
attempts++;
showStats();
}
return false;
}

//TRAPS KEYBOARD PRESSES AND HANDLES PAUSE, RESTART, AND GUN RELOAD CONDITIONS FROM THEM.
function getkeypress(keypress){
if(keyTrap){
var keyp=(ie)?window.event.keyCode:keypress.which;
if(keyp==112){
 clearInterval(id1);
 alert('Game Paused...\n\nPress "Ok" to continue.\n\n');
 id1=setInterval('moveN('+currEl+')',Math.max(currSpeed, maxSpeed));
 }else if(keyp==114){
 clearInterval(id1);
 if(confirm('Click OK if you really wish to restart?'))startAnimate();
 else id1=setInterval('moveN('+currEl+')',Math.max(currSpeed, maxSpeed));
}else if(keyp==32){
 if(enableReload){
 shotsLeft=shots;
 doSound('sound',sounds[1]);
 status='Shots Remaining: '+shotsLeft;
}}
return false;
}}

//FUNCTION TO UPDATE THE SCOREBOARD.
function showStats(){
var a=Math.round(hit/attempts*100);
hitEl.innerHTML=hit;
missedEl.innerHTML=missed;
attemptsEl.innerHTML=attempts;
if(hit%hitPerLev==0)levelEl.innerHTML=hit/hitPerLev;
accuracyEl.innerHTML=((isNaN(a))?'? %':a+'%');
}

//FUNCTION TO GET MOUSE COORDINATES.
function getMCoords(evt){
ex=(ie)?event.clientX:evt.pageX;
ey=(ie)?event.clientY:evt.pageY;
sx=(ie)?document.body.scrollLeft:0;
sy=(ie)?document.body.scrollTop:0;
if(ie)moveGun();
}

//FUNCTION TO MOVE THE GUN BASED ON MOUSECOORDINATES FOUND IN THE ABOVE FUNCTION.
function moveGun(){
gun.style.left=(ex+sx-getPageLeft(playField)-gunW/2-2)+'px';
gun.style.top=(ey+sy-getPageTop(playField)+gunOffset)+'px';
return false;
}

//CONSTRUCTOR FUNCTIONT TO CREATE AND RE-INITIALIZE A TARGET. GETS ELEMENT REFERENCES, SETS EVENT HANDLERS, AND SETS OTHER NEEDED PROPERTIES.
function tgtEl(n){
var v=getEl('trgt'+n);
v.d=targets[n][5];
v.w=targets[n][3];
v.h=targets[n][4];
v.x=targets[n][1]-((v.d==2)?v.w-1:0);
v.y=targets[n][2]-((v.d==4)?v.h-1:0);
v.count=0;
v.n=n;
if(v.d==1 || v.d==2)v.step=v.w/5;
else v.step=v.h/5;
if(v.d==2)v.style.clip='rect(0 '+v.w+' '+v.h+' '+v.w+')';
else if(v.d==1)v.style.clip='rect(0 0 '+v.h+' 0)';
if(v.d==4)v.style.clip='rect('+v.h+' '+v.w+' '+v.h+' 0)';
else if(v.d==3)v.style.clip='rect(0 '+v.w+' 0 0)';
v.style.top=v.y+'px';
v.style.left=v.x+'px';
v.onmousedown=function(){
if(shotsLeft>0){
this.moveScroll(this.n,false);
this.step=Math.abs(this.step);
hit++;
if(hit%hitPerLev==0)currSpeed=Math.max(maxSpeed,currSpeed-speedPerLev);
showStats()
clearInterval(id1);
setTimeout('animate()',currSpeed);
}}
if(v.d==1)v.moveScroll=ms1;
if(v.d==2)v.moveScroll=ms2;
if(v.d==3)v.moveScroll=ms3;
if(v.d==4)v.moveScroll=ms4;
return v;
}

//RETURNS ARRAY OF CLIP VALUES. PASS IT THE VALUE OF THE CLIP PROPERTY.
//BASED ON CODE FROM MIKE HALL OF BRAINJAR.COM
function getClip(str){
var clip = new Array();
var i=str.indexOf("("); clip[0]=parseInt(str.substring(i+1,str.length),10);
i=str.indexOf(" ",i+1); clip[1]=parseInt(str.substring(i+1,str.length),10);
i=str.indexOf(" ",i+1); clip[2]=parseInt(str.substring(i+1,str.length),10);
i=str.indexOf(" ",i+1); clip[3]=parseInt(str.substring(i+1,str.length),10);
return clip;
}

//"moveScroll" FUNCTION SET AS A TARGET'S METHOD IF SCROLLING DIRECTION IS LEFT
//IF isDelta IS false, ASSUMING RETURN TO INIT POS.
function ms1(v,isDelta){//<<<<
if(isDelta){
this.style.left=parseInt(this.style.left)-v+'px';
v+=getClip(this.style.clip)[1];
this.style.clip='rect(0 '+v+' '+this.h+' 0)';
this.count++;
}else{
this.style.left=this.x+'px';
this.style.clip='rect(0 '+0+' '+this.h+' 0)';
this.count=0;
}}

//"moveScroll" FUNCTION SET AS A TARGET'S METHOD IF SCROLLING DIRECTION IS RIGHT
//IF isDelta IS false, ASSUMING RETURN TO INIT POS.
function ms2(v,isDelta){//>>>>
if(isDelta){
this.style.left=parseInt(this.style.left)+v+'px';
v=getClip(this.style.clip)[3]-v;
this.style.clip='rect(0 '+this.w+' '+this.h+' '+v+')';
this.count++;
}else{
this.style.left=this.x+'px';
this.style.clip='rect(0 '+this.w+' '+this.h+' '+this.w+')';
this.count=0;
}}

//"moveScroll" FUNCTION SET AS A TARGET'S METHOD IF SCROLLING DIRECTION IS UP
//IF isDelta IS false, ASSUMING RETURN TO INIT POS.
function ms3(v,isDelta){//AAAA
if(isDelta){
this.style.top=parseInt(this.style.top)-v+'px';
v+=getClip(this.style.clip)[2];
this.style.clip='rect(0 '+this.w+' '+v+' 0)';
this.count++;
}else{
this.style.top=this.y+'px';
this.style.clip='rect(0 '+this.w+' 0 0)';
this.count=0;
}}

//"moveScroll" FUNCTION SET AS A TARGET'S METHOD IF SCROLLING DIRECTION IS DOWN
//IF isDelta IS false, ASSUMING RETURN TO INIT POS.
function ms4(v,isDelta){//VVVV
if(isDelta){
this.style.top=parseInt(this.style.top)+v+'px';
v=getClip(this.style.clip)[0]-v;
this.style.clip='rect('+v+' '+this.w+' '+this.h+' 0)';
this.count++;
}else{
this.style.top=this.y+'px';
this.style.clip='rect('+this.h+' '+this.w+' '+this.h+' 0)';
this.count=0;
}}

//DOES THE ACTUAL ANIMATION OF THE TARGET. ALSO HANDLES "GAME OVER" CONDITION.
function moveN(n){
var v=tgts[n];
v.moveScroll(v.step,true);
if(v.count>=5){
v.step=-v.step;
v.count=0;
if(v.count<=0 && v.step>0){
missed++;
showStats();
clearInterval(id1);
if(missed==maxGotAway){
if(confirm('                   *****  GAME OVER  *****\n\nYou let '+maxGotAway+' targets get away. You made it to level '+(Math.round(hit/hitPerLev))+'.\n\nPress OK when ready to start a new game, Cancel to quit.'))startAnimate();
}else setTimeout('animate()', Math.max(currSpeed,maxSpeed));
}}}

//RANDOMLY SELECTS A TARGET TO POP INTO VIEW
function animate(){
currEl=Math.floor(Math.random()*targets.length);
id1=setInterval('moveN('+currEl+')',Math.max(currSpeed, maxSpeed));
}

//INITIALIZES GAME WHEN PAGE INITIALLY LOADED AND FOR A NEW GAME.
function startAnimate(){
hit=0;
attempts=0;
missed=0;
currSpeed=startSpeed;
showStats();
clearInterval(id1);
for(i=0;i<targets.length;i++)tgts[i]=new tgtEl(i);
animate();
}

//FUNTION TO GET ELEMENT REFERENCES FOR DIFFERENT BROWSER TYPES.
function getEl(str){
if(ie)return document.all[str];
else return document.getElementById(str);
}

//FUNCTION TO GET ALL ELEMENT REFERENCES AND SETS UP EVENT HANDLERS. CALLED WHEN PAE DONE LOADING.
function initGame(){
if(ie||ns6){
self.resizeTo(screen.availWidth, screen.availHeight);
self.moveTo(0,0);
gun=getEl('gun');
playField=getEl('playField');
hitEl=getEl('hitEl');
missedEl=getEl('missedEl');
attemptsEl=getEl('attemptsEl');
levelEl=getEl('levelEl');
accuracyEl=getEl('accuracyEl');
document.onkeypress=getkeypress;
document.onmousemove=getMCoords;
if(ns6)setInterval('moveGun()',30); //NS6 ANIMATION BUG WORKAROUND.
playField.onmousedown=shoot;
playField.onselectstart=function(){return false}
playField.oncontextmenu=function(){return false}
playField.onmouseover=function(){
  gun.style.display="block";
  keyTrap=true;
  }
playField.onmouseout=function(){
  gun.style.display="none";
  keytrap=false;
  }
gun.style.visibility="visible";
var t='Use the mouse cursor to aim your gun at the\ntargets that pop out at various places.\n\n- Press P to pause the game.\n- Press R to restart the game.\n';
if(enableReload)t+='- Press the SpaceBar to reload your weapon every '+shots+' shots.\n  (watch the statusbar for amount of ammo left.)\n';
t+='\nPress OK when ready...';
alert(t);
startAnimate();
}}

window.onload=initGame;

//BUILD THE GAME PLAY AREA, TARGETS, PLAYER WEAPON, AND SCOREBOARD AREA.
var t='';
if(ie||ns6){
t+='<div id="playField" style="cursor:'+gCursor+'; position:relative; width:'+gWidth+'px; height:'+gHeight+'px; border-width:2px; border-style:outset"><img src="'+gURL+'" width="'+gWidth+'" height="'+gHeight+'">';
for(i=0;i<targets.length;i++)t+='<div id="trgt'+i+'" style="position:absolute; width:'+targets[i][3]+'px; height:'+targets[i][4]+'px; left:'+(targets[i][1]-((targets[i][5]==2)?targets[i][3]-1:0))+'px; top:'+(targets[i][2]-((targets[i][5]==4)?targets[i][4]-1:0))+'px; clip:rect(0px 0px 0px 0px)"><img src="'+targets[i][0]+'" width="'+targets[i][3]+'" height="'+targets[i][4]+'"></div>';
t+='<div id="gun" style="position:absolute; top:0px; left:0px; width:'+gunW+'px; height:'+(expH+gunH)+'px; display:none"><img src="'+expBlURL+'" width="'+gunW+'" height="'+expH+'" name="gun_exp"><br><img src="'+gunURL+'" width="'+gunW+'" height="'+gunH+'"></div>';
t+='</div><bgsound id="sound" src="#" loop=1 autostart="true"><div style="width:'+gWidth+'px;"><center>';
t+='<table cellpadding=3 cellspacing=0 border=0>';
t+='<tr align="left"><td width="220" style="'+statStyle+'">Targets Hit:</td><td width="100"><span id="hitEl" style="'+statStyle+'">0</span></td></tr>';
t+='<tr align="left"><td width="220" style="'+statStyle+'">Targets That Got Away:</td><td width="100"><span id="missedEl" style="'+statStyle+'">0</span></td></tr>';
t+='<tr align="left"><td width="220" style="'+statStyle+'">Total Shots:</td><td width="100"><span id="attemptsEl" style="'+statStyle+'">0</span></td></tr>';
t+='<tr align="left"><td width="220" style="'+statStyle+'">Level:</td><td width="100"><span id="levelEl" style="'+statStyle+'">0</span></td></tr>';
t+='<tr align="left"><td width="220" style="'+statStyle+'">Hit Accuracy:</td><td width="100"><span id="accuracyEl" style="'+statStyle+'">? %</span></td></tr>';
t+='</table></center></div>';
}else t+='<h2>This game only visible in Internet Explorer and Netscape 6.</h2>';
document.write(t);
t=0;

</script>

2: Edit the parameters to suit your needs.

Over 2000+ free Javascript

at JavaScriptBank.com Website