A DOM-Based Snakes Game, Part I: The Global Variables

A DOM-Based Snakes Game, Part I (5)

The Global Variables

You can learn a lot from a program's global variables, and our Snakes game is not an exception. Going over the global variables list is a good introduction to the game's algorithm and data structures. Here is the list:

var maxRowCount = 13;
var maxColumnCount = 23;
var rightBorder = maxColumnCount - 2;
var leftBorder = 0;
var topBorder = 0;
var bottomBorder = maxRowCount - 1;
var bottomLine = bottomBorder - 1;
var borderGif = "border.gif";
var coreGif = "back.gif";
var snakeGif = "snake.gif";
var targetGif = "apple.gif";
var snakeInitialLength = maxRowCount - 5;
var snakeRowPos = new Array(maxRowCount * maxColumnCount);
var snakeColumnPos = new Array(maxRowCount * maxColumnCount);
var snakeLength;
var headColumnChange;
var headRowChange;
var targetRow;
var tagetColumn;
var afterTailRow, afterTailColumn;
var interval = 50;
var score;
var asciiU = 85;
var asciiu = 117;
var asciiD = 78;
var asciid = 110;
var asciiR = 75;
var asciir = 107;
var asciiL = 72;
var asciil = 104;
var ascii8 = 56;
var ascii2 = 50;
var ascii4 = 52;
var ascii6 = 54;

We first define the size of the game board, 13 by 23, including the border and the <BR> column:

var maxColumnCount = 23;
var rightBorder = maxColumnCount - 2;

We then define the border lines. All but the right border are the outer squares of the board. The right border is two columns away from the edge because of the <BR> column:

var rightBorder = maxColumnCount - 2;
var leftBorder = 0;
var topBorder = 0;
var bottomBorder = maxRowCount - 1;

The initial snake is position at the bottom row, adjacent to the bottom border:

var bottomLine = bottomBorder - 1;

The next four variables define the images we display. We have one for the snake, one for the target, one for the border, and one for the board's background:

var borderGif = "border.gif";
var coreGif = "back.gif";
var snakeGif = "snake.gif";
var targetGif = "apple.gif";

The snake's initial length is set to five squares less than the board's width:

var snakeInitialLength = maxRowCount - 5;

The snake is traced through the board via its squares' row and column coordinates. These coordinates are stored in two arrays: snakeRowPos and snakeColumnPos. In its maximum length, the snake can occupy every square of the board. Therefore, the maximum size of these arrays is set to the size of the board, maxRowCount times maxColumnCount. The variable snakeLength stores the current snake's length. The variables targetRow and targetColumn denotes the target's coordinates. The variable score carries the current score. The player wins a point for every target eaten. More levels will be added in the next column. The variable interval sets the snake's crawling speed. The shorter interval is the faster it goes.

The variables headRowChange and headColumnChange denote the change in the snake's head position during the next move. They can be either 0 (no change), 1 (add one to its coordinate), and -1 (subtract one from its coordinate). Since the snake turns only in right angles, either one of these variables must be 0 and the other one may be either 1 or -1. If, for example, the snake is going up, its headRowChange is -1 and its headColumnChange is 0.

The variables afterTailRow and afterTailColumn are the coordinates of the snake's tail before the current move. The snake extends its tail into this position when eating its target.

Finally, the user instructs the game to turn with a predefined set of keys. The keys are stated in their decimal ascii values. The user can turn up with the asciiU key, down with the asciiD key, left with the asciiL key, and right with the asciiR key. The exact keys used for these turns are U for up, H for left, N for down, and K for right. Lower case letters are also supported. We also support the keypad's arrow keys: 8 (up arrow), 4 (left arrow), 2 (down arrow), and 6 (right arrow).

Produced by Yehuda Shiran and Tomer Shiran

Created: August 16, 1999
Revised: August 16, 1999

URL: https://www.webreference.com/js/column46/global.html