View Full Version : Moving pixels around an arena

10-27-2004, 10: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 >


<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;}




<h1>Snake Game Arena</h1>

<script type="text/javascript">
for (var i = 0; i<=50; i++) {
for (var j = 0; j<=40; j++) {


10-28-2004, 12:14 PM
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)