...

View Full Version : Need help - please analyse my code!! Thanks!!



Buckster_uk
11-04-2004, 02:05 PM
Hi,

I am creating a snake game, posted about a week back, and have been developing it a bit. so far I have got this....

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

<head>

<title>Snake Game Arena</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

table {
margin: 0 auto;
border: 2px solid blue;
background-color: red;


}

td {
height: 1px;
width: 1px;
background-color: white;

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

</style>

</head>

<body onkeydown="keyDownHandler(event);"
onload="drawImage(X,Y);">

<h1>Snake Game Arena</h1>

<script type="text/javascript">

var X = 20;
var Y = 20;

var maxX = 49;
var maxY = 49;

function keyDownHandler(e) {
if (e.keycode == 37 /* LEFT ARROW */) {
if (X>0) X--;
} else if (e.keycode == 39 /* RIGHT ARROW */) {
if (X<maxX) X++;
} else if (e.keycode == 38 /* UP ARROW */) {
if (Y>0) Y--;
} else if (e.keycode == 40 /* DOWN ARROW */) {
if (Y<maxY) Y++;
} else return true;

}




</script>


<table id="snakearena">
<script type="text/javascript">
for (var row = 0; row<=maxY; row++) {
document.write("<tr>")
for (var col = 0; col<=maxX; col++) {
document.write("<td>")
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")

arena = getElementById("snakearena");
tdArray = arena.getElementsByTagName("td");
alert(tdArray.length);


</script>



</body>
</html>

I am looking to put an image named snake.gif into one of the cells and move it around whenever an arrow key is pressed. So far I have the arena up but I cannot get the image to load up, I have used the XY coordinates (20, 20) and was hoping that the image would show up onload, but it does not. To draw the image, I was thinking about using this code, or something similar.
Would this work? Have I gone completely wrong or am I on some sort of right line?!

function drawImage(X,Y) {
var 1 = Y*(maxX+1) + X;
tdArray[1].style.backgroundImage='url(snake.gif)'"
}



Any help is great, thanks!

hemebond
11-04-2004, 10:03 PM
Do you use Mozilla Firefox for development? If not, I suggest you do. You got some critical errors popping up that are easy to find with the Javascript console. The most obvious being that you're calling the getElementById method without using the document object.

Oh, and you can't assign a value to 1 (in your drawImage function). And you can't use document.write with XHTML documents, so ditch it and use HTML Strict.

Buckster_uk
11-05-2004, 12:44 AM
Thanks for the response, I have changed the mistakes and modified the code, I now want my pixel to move automatically in one direction when the page loads. How would I do this? Would I have to use the timeout method? What code would I use for it?

Here is my modified code....

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

<head>

<title>Snake Game</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

table#snakearena {
margin: 0 auto;
border: 2px solid blue;
background-color: red;
}
table#snakearena td {
height: 5px;
width: 5px;

}

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

</style>

<script type="text/javascript">

var X = 20;
var Y = 20;

var maxX = 49;
var maxY = 49;

function keyDownHandler(e) {

var oldX = X;
var oldY = Y;

if (e.keyCode == 37 /* LEFT ARROW */) {
if (X>0) X--;
} else if (e.keyCode == 39 /* RIGHT ARROW */) {
if (X<maxX) X++;
} else if (e.keyCode == 38 /* UP ARROW */) {
if (Y>0) Y--;
} else if (e.keyCode == 40 /* DOWN ARROW */) {
if (Y<maxY) Y++;
} else return true;
eraseImage(oldX, oldY);
drawImage(X, Y);
}

function eraseImage(X, Y) {
var l = Y * (maxX+1) + X;
tdArray[l].style.backgroundColor='';
}
function drawImage(X, Y) {
var l = Y * (maxX+1) + X;
tdArray[l].style.backgroundColor='Blue';
}
</script>

<body onkeydown=keyDownHandler(event);
onload=drawImage(X,Y);>

</head>

<h1>Snake Game Arena</h1>

<table id="snakearena">
<script type="text/javascript">
for (var row = 0; row<=maxY; row++) {
document.write("<tr>")
for (var col = 0; col<=maxX; col++) {
document.write("<td>")
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")

arena = document.getElementById("snakearena");
tdArray = arena.getElementsByTagName("td");

</script>




</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum