Hi,

I am finishing a javascript project, hopefully some of you could provide me with possible pieces of code or tips, would be much appreciated.

Basically its your original snake game on the phones, I have posted before, managed to get to here though, but really need help, I need to add a pop up which tells the user when the snake hits the wall, add a pixel in the table whereby when the snake goes over it, it grows by a pixel like the normal game, and also the pixel moves everytime it gets eaten so it does not come back in the same place.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Snake</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="SnakeCSS.css"/>

<!--Declares all the functions globally-->
<script type="text/javascript">
<!--
var X = new Array(5,6,7,8,9,10)
var Y = new Array(5,5,5,5,5,5)
var maxX = 29;
var maxY = 15;

function keyDownHandler(e) {
var oldX = X[5];
var oldY = Y[5];

if (e.keyCode == 37 /* LEFT ARROW */) {
if ((dX==1) && (dY==0)) return false;
if (X[5]>0){
dX=-1;
dY=0;
}
} else if (e.keyCode == 39 /* RIGHT ARROW */) {
if ((dX==-1) && (dY==0)) return false;
if (X[5]<maxX){
dX=1;
dY=0;
}
} else if (e.keyCode == 38 /* UP ARROW */) {
if ((dX==0) && (dY==1)) return false;
if (Y[5]>0){
dX=0;
dY=-1;
}
} else if (e.keyCode == 40 /* DOWN ARROW */) {
if ((dX==0) && (dY==-1)) return false;
if (Y[5]<maxY){
dX=0;
dY=1;
}
} else return true;
return false
}

//erase a pixel
function erasePixel(X, Y) {
var l = Y * (maxX+1) + X;
cell[l].style.backgroundColor='';
}

//draw a pixel into a cell
function drawPixel(X, Y) {
var l = Y * (maxX+1) + X;
cell[l].style.backgroundColor='yellow';
}

//Loads when the arena loads up
function load() {
for (var i=0;i<=5;i++){
drawPixel(X,Y);}
dX = 1;
dY = 0;
imageMover = window.setInterval('movePixel();', 1000);
}

//Moves the pixel at one direction
function movePixel(){
if(dX==0 && dY==0) return;
var oldX = X[ 0 ];
var oldY = Y[ 0 ];
X[ 0 ] = X[1]; Y[ 0 ] = Y[1];
X[1] = X[2]; Y[1] = Y[2];
X[2] = X[3]; Y[2] = Y[3];
X[3] = X[4]; Y[3] = Y[4];
X[4] = X[5]; Y[4] = Y[5];
X[5] = X[5] + dX;
Y[5] = Y[5] + dY;
if (X[5]<0 || Y[5]<0 || X[5]>maxX || Y[5]>maxY){
window.clearInterval(imageMover);
return;
}
erasePixel(oldX, oldY);
drawPixel(X[5],Y[5]);
}
//-->
</script>
</head>

<body onkeydown="keyDownHandler(event);" onload="load();">
<h1>Snake Game</h1>
<h2>Stage 5 - The Snake</h2>

<script type="text/javascript">
<!--
document.write('<table id="snake-arena" cellpadding="0" cellspacing="0">')
for (var row=0; row <= maxY; row++) {
document.write('<tr>');
for (var col=0; col <= maxX; col++) {
document.write('<td>&nbsp;&nbsp;&nbsp;</td>');
}
document.write('</tr>');
}
document.write('</table>');

SnakeArena = document.getElementById("snake-arena");
cell = SnakeArena.getElementsByTagName("td");
//-->
</script>

<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" />
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-css" alt="Valid XHTML 1.0!" />
</a>
</p>


</body>
</html>

This is the CSS for the page aswell...

table#snake-arena {
margin: 0 auto;
border: 10px solid black;
background-color: gray;
height: 135px;
width: 450px;
}

table#snake-arena td {
height: 15px;
width: 15px;
}

h1{
color: blue;
text-align: center;
text-decoration: underline;
}

body{
text-align: center;
}

address{
text-align: right;
font-style: normal;
font-weight: bold;
}

p{
text-align: right;
}



Thanks to anyone who can help, I would really appreciate it once again.