Jon Perry's DHTML Arcade


		Home \| Community \| Developer's Paradise \| Jobs User Groups \| Site Tools \| Site Information \| Search

Main Menu

Jon Perry's DHTML Arcade

-Jon Perry's DHTML Arcade
-Space Bounty Hunter
-Pac Man
-Breakout
-Discuss this Article

Categories
Client User Group
Internet Playground
Language
JavaScript
Product
IE5
Task
Fun Stuff, Games, Layout Enhancement
Technology
Dynamic Positioning, Dynamic Style

Sponsored Links

Inside Technique : Jon Perry's DHTML Arcade : Breakout

BreakOut 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 knock out all the bricks for all the six progressively more difficult levels.

Play Breakout (IE5 Only)

The code is easy enough to follow if you persevere with it. I have explained the main points.

The usual opening HTML, with a style for all images:

<HTML>
<HEAD>
<TITLE>BreakOut</TITLE>
<STYLE>
IMG {position:absolute}
</STYLE>
<SCRIPT>

The opening statements, which define a few variables to prevent a crash, preload the rotating ball images, set up the progessive levels, and define a random function:

vb=new Array();
for (i=0;i<4;i++) {
vb[i]=new Image();
vb[i].src='ball'+i+'.bmp';
}
x=200;
bx=300;
by=200;

sy=new Array(200,200,250,250,300,300);

function rnd(n) {
return Math.floor(Math.random()*n);
}

makewall() can create a large variety of bricked walls. The function uses the createElement features, and appends the newly created image ( which also gets the 'position:absolute' style) to the document:

function makewall() {
for (i=0;i<10;i++)
for (j=0;j<d+5;j++) {
br=document.createElement('IMG');
br.src='brick.bmp';
br.style.zIndex=0;
br.ID=''+eval(i*(d+5)+j);
br.style.height=20;
br.style.width=70;
br.style.left=i*70;
br.style.top=30+d*10+j*20;
document.body.appendChild(br);
}
by=sy[d];
}

This function holds the game engine, and manages to move and animate the ball, control the ball's range, checks for any collisions and update the situation and score. It also maintains the game integrity, and supplies any appropriate messages.

function ball() {
B.src=vb[bv++].src;
if (bv>3) bv=0;
bx+=hd;
by+=vd;
if (bx>670) hd=-hd;
if (bx<0) hd=-hd;
if (by>400) {l--;hd=5+rnd(5);vd=3+rnd(5);bx=300;by=sy[d];}
if (by<0) vd=-vd;
if (by>380 && bx>=x-20 && bx<=x+68 && vd>0 && by<=400) {hp=true;vd=-vd;}
if (hp) {
if (bx=x+58) hd=-hd;
hp=false;
}
if (rnd(500)==81) hd+=Math.abs(hd)/hd;
if (rnd(500)==69) vd+=Math.abs(vd)/vd;
if (vd>20) vd=20;
if (hd>20) hd=20;

et=document.elementFromPoint(bx+15,by);
if (et && parseInt(et.ID)==et.ID) {
et.style.left=700;
s++;
vd=-vd;
bl--;
}
el=document.elementFromPoint(bx,by+15);

if (el && parseInt(el.ID)==el.ID) {
el.style.left=700;
s++;
hd=-hd;
bl--;
}
er=document.elementFromPoint(bx+31,by+15);
if (er && parseInt(er.ID)==er.ID) {
er.style.left=700;
s++;
hd=-hd;
bl--;
}
eb=document.elementFromPoint(bx+15,by+30);
if (eb && parseInt(eb.ID)==eb.ID) {
eb.style.left=700;
s++;
vd=-vd;
bl--;
}
status='Score '+s+' : Lives '+eval(l+1)+' : Level '+eval(d+1);
if (l>0 && bl>0) setTimeout('ball()',10);
else if (l==0) {
alert('Game Over. You scored '+s+' points.');
init();
}
else if (bl==0) {
alert('Level Completed. Bonus 100 points.');
s+=100;
d++;
if (d<6) go();
else if (d==6) {
alert('Well Done.\nYou have completed all 6 levels.\nYou scored '+s+'points.');
init();
}
}
}

init() holds several variables that only need to be accessed at the start of a game.

function init() {
DH.style.cursor='crosshair';
d=0;
x=200;
bx=300;
s=0;
l=2;
bv=0;
hp=false;
go();
}

go() holds variables for the start of each level.

function go() {
bl=50+d*10;
hd=5+rnd(5);
vd=3+rnd(5);
makewall();
ball();
}

And finally we add the necessary elements to the document.

</SCRIPT>
</HEAD>
<BODY ID="DH" scroll="no" onload="init();" onmousemove="x=event.clientX-34;">
<IMG SRC="paddle.bmp" ID="P" style="left:expression(x);top:400">
<IMG SRC="ball.bmp" ID="B" style="left:expression(bx);top:expression(by)">
<DIV style="position:absolute;top:0;left:700;height:expression(document.body.clientHeight);width:expression(document.body.clientWidth-700);background-color:black;z-index:1"></DIV>
</BODY>
</HTML>

Good Luck! Be sure to play Breakout.

Jon Perry is a freelance Author and Programmer from England.

Discuss and Rate this Article

Page 1:Jon Perry's DHTML Arcade
Page 2:Space Bounty Hunter
Page 3:Pac Man
Page 4:Breakout