Moving pixels around an arena

Buckster_uk · 10-27-2004, 09:02 PM

Hi guys, posted few days back, and have been creating a javascript game, namely Snake.

I have created an arena for the game below with document.write methods and a for loop to write in the rows.

I have to create the start of a snake in the arena at a random place when the page loads up, I am guessing I would use the random method in the Maths bit of javascript.

How can I move the pixel about? I am stuck on this bit. Total novice really and would like some help.

This is my code so far...

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

<head>

<title>Group Project Task #1 - 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;

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

</style>

</head>

<body>

<h1>Snake Game Arena</h1>

<script type="text/javascript">
document.write("<table>")
for (var i = 0; i<=50; i++) {
document.write("<tr>")
for (var j = 0; j<=40; j++) {
document.write("<td>")
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>

</body>
</html>

Kor · 10-28-2004, 11:14 AM

I would not like to dishearten you, but things might not be as simple as you might have thought.

I presume that you want your "pixel" (by the way, where is he? ) should move inside your "arena". If so, there might be several steps to pass:

1. Build you arena (by the way, I see no reason for building it using javascript)
2. Return the arena 'limits";
3. Set the move function (by the way, which might be the event to start/stop moving process?)
3. If "pixel" position is to excede the arena limits, keep it inside (change move direction or stop)

Note: you must see the arena and the "pixel" as two distinct objects, thus you must positioned them in the document (CSS and then CSS on-the-fly for moving action)