Ok, the situation is that we have now the dots and enemies within the maze. But now we have another problem, well 2 to be exact.

First, We have manage to place the enemy.gif within the maze. But the problem is now trying to move the Enemy.gif randomly and automatically around the the maze. We have got the Pacman to move around using the 2,4,6,8 controls, but we are stuck as to move the enemy automatically around the maze. Would we use an window.setInterval() handle?

Second, we have placed a start.gif within the javascript, but when the user clicks this Pacman is needed to move automatically to his left. How would we go about this. Again would it need a Window.setInterval() handle.

Any suggestions would be very much welcomed.

Pacman

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pac-Man Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
<!--
var nRows = 22;
var nCols = 22;



myBoard= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0,
0,0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,
0,0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,
0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,
0,0,1,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,1,0,0,0,
0,0,1,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,1,0,0,0,
0,0,0,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,1,1,0,1,1,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,1,1,1,1,1,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,
0,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0,
0,0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,
0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,
0,0,0,1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,
0,0,1,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,1,0,0,0,
0,0,1,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1,0,0,0,
0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

function setup(id) {
//where's the image now?: [X=column, Y=row from top/left=0/0 OF THE ARRAY]
X = 10; Y = 12; //global [1st allowed position]
//set up the global cells array:
var obj = document.getElementById(id);
tdArray = obj.getElementsByTagName('td'); //global
//draw the first image into the empty table
insertImage(X,Y);
//assign the key handler
document.body.onkeydown = handleKey2;
//interval 0.2 second = 200 ms
interval = 200; //global!
//movement every interval is
dX = 0; dY = 0; //global!
//arrange to call the movement function every interval
//NB: The new global variable moverSI can be passed to clearInterval.
moverSI = window.setInterval('moveIt();', interval);
}


function insertImage(X,Y) {
var i = nRows*Y + X;
//alert('X/Y=' + X + '/' + Y + '=' + i);
obj = tdArray[i];
//create an image tag
var newNode = document.createElement('img');
//give it the right SRC attribute
newNode.setAttribute('src', (myBoard[Y*nCols + X] == 1)?'pacmanleft.gif':'pacmanright.gif');
//replace the cell contents with it
if (obj.hasChildNodes()) removeChildren(obj);
obj.appendChild(newNode);
}

//remove the children of an object
function removeChildren(obj) {
while (obj.hasChildNodes()) obj.removeChild(obj.firstChild);
}

//move the image in the direction set by dX/dY
function moveIt() {
//increment/decrement X/Y and make sure we're in the table still
var newX = X + dX;
var newY = Y + dY;
if ((newX<0) || (newX>(nCols-1)) || (myBoard[nCols*newY + newX] == 0)) dX = 0; //no further movement in this direction
if ((newY<0) || (newY>(nRows-1)) || (myBoard[nCols*newY + newX] == 0)) dY = 0; //no further movement in this direction
//alert(myBoard[nCols*newY + newX] + ' X/Y=' + X + '/' + Y + ' + ' + dX + '/' + dY);
//insert the image in the new position
if (dX != 0 || dY != 0) {
//remove the image from the OLD X/Y position
removeChildren(tdArray[nCols*Y + X]);
//put it into the new position
insertImage(newX,newY);
//store the new position
X = newX; Y = newY;
}
}

//handle keypresses - move the image
function handleKey2() {
//e is the event
var e = window.event;
if (e.type == 'keydown' && (e.keyCode == 27 || (e.keyCode >= 37 && e.keyCode <= 40))) {
//change dX/dY according to the key pressed
switch(e.keyCode) {
case 37: //left (subtract one from the column)
dX = -1;
dY = 0;
break;
case 38: //up (subtract one from the row)
dX = 0;
dY = -1;
break;
case 39: //right (add one to the column)
dX = 1;
dY = 0;
break;
case 40: //down (add one to the row)
dX = 0;
dY = 1;
break;
default:
dX = 0;
dY = 0;
break;
}
return false; //stop the default action (if any)
} //end of if test
return true;
}

//-->
</script>

<style type="text/css">
#board td { height: 25px; width: 25px; text-align: center; }
</style>
</head>
<body onload="setup('board');">
<h1 align="center">Pac-Man</h1>
<div style="text-align: center; margin-left: auto; margin-right: auto;">
<table style="border: 5px solid black;" cellspacing="0px" id="board">
<script language="JavaScript" type="text/javascript">
for (var row=0; row<nRows; row++) {
document.write('<tr>'); //open row
for (var col=0; col<nCols; col++) {

switch (myBoard[row*nCols + col]) {
case 0:
var colour = 'black';
break;
case 1:
var colour = 'gray';
break;
case 2:
var colour = 'white';
break;
}
document.write('<td style="text-align:center;background-color:', colour, ';">');
document.write(' </td>');
}
document.write('</tr>');
}
</script>
</table>


</div>
</body>
</html>