| ||
|
|
| |
| ||
| ||
| Inside Technique : Jon Perry's DHTML Arcade : Pac Man PacMan is a game written entirely in DHTML for IE5. It uses several DHTML techniques to provide continuous game play with several effects.
You must guide the PacMan around the maze using the cursor keys and collect all the dots on a screen, while avoiding the Ghosts. The powerups give the PacMaan the power to eat the ghosts - but only for a limited time! Play Pac Man (IE5 Only) The code is easy enough to follow if you persevere with it. I have explained the main points. Opening HTML, with the postion:absolute style applied to all the images in the program.
<HTML>
<HEAD>
<TITLE>PacMan</TITLE>
<STYLE>
IMG {position:absolute}
</STYLE>
<SCRIPT>
Necessary opening variables, and the image pre-loading routines.
l=3;
s=1;
d=500;
px=368;
py=370;
g1x=368;
g2x=404;
g1y=190;
g2y=226;
lives='<<<';
v=new Array();
tile=new Image();
tile.src="tile.bmp";
GhE=new Image();
GhE.src="ghostE.bmp";
GhH=new Image();
GhH.src="ghostH.bmp";
Gh1=new Image();
Gh1.src="ghost1.bmp";
Gh2=new Image();
Gh2.src="ghost2.bmp";
vp=new Array();
for (i=0;i<8;i++)
vp[i]=new Image();
vp[0].src='pacmanL1.bmp';
vp[1].src='pacmanL2.bmp';
vp[2].src='pacmanR1.bmp';
vp[3].src='pacmanR2.bmp';
vp[4].src='pacmanU1.bmp';
vp[5].src='pacmanU2.bmp';
vp[6].src='pacmanD1.bmp';
vp[7].src='pacmanD2.bmp';
ms=new Array('block','point','powerup','tile');
mp=new Array();
start() creates the image elements for the maze. It offers greater control than document.write(). start() is only ever called once, as you can see start() calls init() which is used once the elements are created.
function start() {
init();
for (i=0;i<18;i++)
for (j=0;j<12;j++) {
pb=document.createElement('IMG');
pb.src=ms[mp[j][i]]+'.bmp';
pb.style.height=36;
pb.style.width=36;
pb.style.left=80+i*36;
pb.style.top=10+j*36;
document.body.appendChild(pb);
}
gm();
}
init() contains the variable values for whenever we restart a level. The mp array contains the maze data.
function init() {
px=368;
py=370;
ptx=8;
pty=10;
g1x=368;
g2x=404;
g1y=190;
g2y=226;
pID=0;
pv=1;
pu=0;
pl=103;
mp[0]=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
mp[1]=new Array(0,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0);
mp[2]=new Array(0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0);
mp[3]=new Array(0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,0);
mp[4]=new Array(0,1,0,1,0,0,0,1,0,0,1,0,0,0,1,0,1,0);
mp[5]=new Array(0,1,1,1,0,1,1,1,0,0,1,1,1,0,1,1,1,0);
mp[6]=new Array(0,1,1,1,0,1,1,1,0,0,1,1,1,0,1,1,1,0);
mp[7]=new Array(0,1,0,1,0,0,0,1,0,0,1,0,0,0,1,0,1,0);
mp[8]=new Array(0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,0);
mp[9]=new Array(0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0);
mp[10]=new Array(0,2,1,1,1,1,1,1,3,1,1,1,1,1,1,1,2,0);
mp[11]=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
}
stock() restocks the maze when we start a level. We cannot recall start() because this would create all the elements again.
function stock() {
for (i=0;i<18;i++)
for (j=0;j<12;j++)
document.images[i*12+j+3].src=ms[mp[j][i]]+'.bmp';
}
The ubiquitous random function.
function rnd(n) {
return Math.floor(Math.random()*n);
}
gm() is the ghost move function. This function has to perform most of the work for the game as well. As we are using expressions and integer arrays, we have to convert between the two co-ordinate systems. The program then uses a semi-intelligent algorithm to determine which direction to move each ghost. We weight any direction which leads the ghost towards the PacMan. After this, we call ge() (ghost eating) to determine life/death play-offs.
function gm() {
t1y=(g1y-10)/36;
t1x=(g1x-80)/36;
t2y=(g2y-10)/36;
t2x=(g2x-80)/36;
d1x=t1x-ptx;
d1y=t1y-pty;
d2x=t2x-ptx;
d2y=t2y-pty;
for (i=0;i<12;i++)
v[i]=0;
if (mp[t1y][t1x+1]>0) {
v[0]=1;
if (d1x<0) {v[1]=1;v[2]=1;}
}
if (mp[t1y][t1x-1]>0) {
v[3]=1;
if (d1x>0) {v[4]=1;v[5]=1;}
}
if (mp[t1y+1][t1x]>0) {
v[6]=1;
if (d1y<0) {v[7]=1;v[8]=1;}
}
if (mp[t1y-1][t1x]>0) {
v[9]=1;
if (d1y>0) {v[10]=1;v[11]=1;}
}
do {
mg=rnd(12);
} while (v[mg]==0);
switch (Math.floor(mg/3)) {
case 0:t1x++;break;
case 1:t1x--;break;
case 2:t1y++;break;
case 3:t1y--;break;
}
for (i=0;i<12;i++)
v[i]=0;
if (mp[t2y][t2x+1]>0) {
v[0]=1;
if (d2x<0) {v[1]=1;v[2]=1;}
}
if (mp[t2y][t2x-1]>0) {
v[3]=1;
if (d2x>0) {v[4]=1;v[5]=1;}
}
if (mp[t2y+1][t2x]>0) {
v[6]=1;
if (d2y<0) {v[7]=1;v[8]=1;}
}
if (mp[t2y-1][t2x]>0) {
v[9]=1;
if (d2y>0) {v[10]=1;v[11]=1;}
}
do {
mg=rnd(12);
} while (v[mg]==0);
switch (Math.floor(mg/3)) {
case 0:t2x++;break;
case 1:t2x--;break;
case 2:t2y++;break;
case 3:t2y--;break;
}
g1x=80+t1x*36;
g1y=10+t1y*36;
g2x=80+t2x*36;
g2y=10+t2y*36;
document.recalc();
ge();
if (pu>0) pu--;
status='Score : '+s+' : Lives : '+lives.substr(0,l);
if (l>0) setTimeout('gm()',d);
else {
alert('Game Over. You scored '+s+' points.');
d=500;
l=3;
s=1;
init();
stock();
gm();
}
}
ge() is another lengthy routine - mainly because we have to determine which ghost is on the PacMan (if any), and whether the PacMan is on a PwerUp are not.
function ge() {
if (pu>1) {
G1.src=GhE.src;
G2.src=GhE.src;
}
else if (pu==1) {
G1.src=GhH.src;
G2.src=GhH.src;
}
else if (pu==0) {
G1.src=Gh1.src;
G2.src=Gh2.src;
gp=2;
}
la=true;
d1x=t1x-ptx;
d1y=t1y-pty;
d2x=t2x-ptx;
d2y=t2y-pty;
if (d1x==0 && d1y==0) {
g1x=368;
g1y=190;
if (pu>0 && !(g1x==368 && g1y==190)) {
s+=gp++;
}
if (pu==0) {
l--;
la=false;
g2x=404;
g2y=226;
px=368;
py=370;
}
}
if (d2x==0 && d2y==0) {
g2x=404;
g2y=226;
if (pu>0 && !(g2x==404 && g2y==226)) {
s+=gp++;
}
if (pu==0 && la) {
l--;
g1x=368;
g1y=190;
px=368;
py=370;
}
}
document.recalc();
}
The final length function, mpm() (move pacman), eponyomously moves the PacMan, which invloves checking for legality of the requested move.
function mpm() {
ek=event.keyCode;
pty=(py-10)/36;
ptx=(px-80)/36;
if (ek==37 && mp[pty][ptx-1]) {
ptx--;
pID=0;
}
if (ek==39 && mp[pty][ptx+1]!=0) {
ptx++;
pID=2;
}
if (ek==38 && mp[pty-1][ptx]!=0) {
pty--;
pID=4;
}
if (ek==40 && mp[pty+1][ptx]!=0) {
pty++;
pID=6;
}
pv=1-pv;
P.src=vp[pID+pv].src;
mxy=mp[pty][ptx];
if (mxy==1) {
s++;
pl--;
document.images[ptx*12+pty+3].src=tile.src;
mp[pty][ptx]=3;
}
if (mxy==2) {
s+=5;
document.images[ptx*12+pty+3].src=tile.src;
pu+=10;
pl--;
mp[pty][ptx]=3;
}
px=80+ptx*36;
py=10+pty*36;
ge();
if (pl==0) {
alert('Level Complete. Bonus 100 Points.');
s+=100;
d-=50;
if (d==0) d=50;
init();
stock();
}
}
To complete the program, we add the HTML, and close the document. </SCRIPT> </HEAD> <BODY onkeydown="mpm();" onload="start();"> <IMG SRC="pacmanR1.bmp" ID="P" style="left:expression(px);top:expression(py);filter:chroma(color=#FFFFFF);z-index:1"> <IMG SRC="ghost1.bmp" ID="G1" style="left:expression(g1x);top:expression(g1y);filter:chroma(color=#FFFFFF);z-index:1"> <IMG SRC="ghost2.bmp" ID="G2" style="left:expression(g2x);top:expression(g2y);filter:chroma(color=#FFFFFF);z-index:1"> </BODY> </HTML> Good Luck! Be sure to play Pac Man. 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. |