| ||
|
|
| |
| ||
| ||
| Inside Technique : Jon Perry's DHTML Arcade : Space Bounty Hunter Space Bounty Hunter is a game written entirely in DHTML for IE5. It uses several DHTML techniques to provide continuous game play with several effects.
The idea is to navigate through the asteroid field and collect the gold. Play Space Bounty Hunter (IE5 Only) The code is easy enough to follow if you persevere with it. I have explained the main points. Standard Header with a style for all the IMG elements. The filter makes color #FFFFFF (white) transparent, so we can see the background through it.
<HTML>
<HEAD>
<TITLE>Space Bounty Hunter</TITLE>
<STYLE>
IMG {position:absolute;filter:chroma(color=#FFFFFF)}
</STYLE>
Loads of variables, and the images. The variables cover the score, position of the objects, and flags for the animations, and the arrays hold the images for the ship, rock and coin. The rnd(n) function returns a random integer between 0 and n-1.
<SCRIPT>
vs=new Array()
for (i=0;i<2;i++) {
vs[i]=new Image();
vs[i].src='ship'+i+'.bmp';
}
vr=new Array()
for (i=0;i<4;i++) {
vr[i]=new Image();
vr[i].src='rock'+i+'.bmp';
}
vc=new Array()
for (i=0;i<2;i++) {
vc[i]=new Image();
vc[i].src='credit'+i+'.bmp';
}
function init() {
ys=0;
xr1=400+rnd(200);
xr2=400+rnd(200);
xr3=400+rnd(200);
xr4=400+rnd(200);
xc=400+rnd(200);
yr1=rnd(500);
yr2=rnd(500);
yr3=rnd(500);
yr4=rnd(500);
yc=rnd(500);
nr=0;
hp=0;
s=0;
d=10;
l=0;
sv=0;
r1=0;
r2=1;
r3=2;
r4=3;
}
init();
function rnd(n) {
return Math.floor(Math.random()*n);
}
This function is effectively the entire game. We scroll the background, update the images, move the objects, check for any collisions, increase the score and see if the player is still alive.
function bg() {
sf.style.backgroundPosition=hp+' 0';
C.src=vc[0].src;
S.src=vs[sv].src;
R1.src=vr[r1].src;
R2.src=vr[r2].src;
R3.src=vr[r3].src;
R4.src=vr[r4].src;
sv=1-sv;
r1++;
r1%=4;
r2++;
r2%=4;
r3++;
r3%=4;
r4++;
r4%=4;
hp-=d;
if (hp<-600) hp=0;
xr1-=d;
xr2-=0.5*d;
xr3-=0.7*d;
xr4-=0.8*d;
xc-=1.5*d;
yr1+=5-rnd(11);
yr2+=9-rnd(19);
yr3+=7-rnd(15);
yr4+=5-rnd(11);
yc+=9-rnd(19);
if (xr1<-100) {xr1=400+rnd(200);yr1=rnd(500);}
if (xr2<-100) {xr2=400+rnd(200);yr2=rnd(500);}
if (xr3<-100) {xr3=400+rnd(200);yr3=rnd(500);}
if (xr4<-100) {xr4=400+rnd(200);yr4=rnd(500);}
if (xc<-100) {xc=400+rnd(200);yc=rnd(500);}
if (yr1<-50) yr1=-50;
if (yr2<-50) yr2=-50;
if (yr3<-50) yr3=-50;
if (yr4<-50) yr4=-50;
if (yc<-50) yc=-50;
if (yr1>400) yr1=400;
if (yr2>400) yr2=400;
if (yr3>400) yr3=400;
if (yr4>400) yr4=400;
if (yc>400) yc=400;
et=document.elementFromPoint(40,ys);
et=(et)?et.id.charAt(0):'';
eb=document.elementFromPoint(40,ys+27);
eb=(eb)?eb.id.charAt(0):'';
er=document.elementFromPoint(86,ys+16);
er=(er)?er.id.charAt(0):'';
el=document.elementFromPoint(0,ys+16);
el=(el)?el.id.charAt(0):'';
if (er=='R' || et=='R' || eb=='R' || el=='R') a=false;
if (er=='C' || et=='C' || eb=='C' || el=='C') {
s+=10;
C.src=vc[1].src;
}
if ((++l)%100==0) d++;
status='Credit :'+s++;
if (a) setTimeout('bg()',50);
if (!a) {
alert('Game Over. You scored '+s+' points.');
go();
}
}
The go() function is called from an onload event, and starts the program in motion.
function go() {
init();
sf.style.cursor='crosshair';
a=true;
c=true;
bg();
}
</SCRIPT>
</HEAD>
We finish by declaring all the HTML elements, with appropriate event handlers, IDs and expressions.
<BODY onload="go();" onmousemove="ys=event.clientY;" scroll="no" style="background:url(stars.bmp)"> <IMG SRC="SHIP.BMP" ID="S" style="left:10;top:expression(ys)"> <IMG SRC="rock.BMP" ID="R1" style="left:expression(xr1);top:expression(yr1)"> <IMG SRC="rock.BMP" ID="R2" style="left:expression(xr2);top:expression(yr2)"> <IMG SRC="rock.BMP" ID="R3" style="left:expression(xr3);top:expression(yr3)"> <IMG SRC="rock.BMP" ID="R4" style="left:expression(xr4);top:expression(yr4)"> <IMG SRC="credit.BMP" ID="C" style="left:expression(xc);top:expression(yc)"> </BODY> </HTML> Happy Hunting! Be sure to play Space Bounty. Jon Perry is a freelance Author and Programmer from England. Page 1:Jon Perry's DHTML Arcade © 1997-2000 InsideDHTML.com, LLC. All rights reserved. |