A DOM-Based Snakes Game, Part I: The Architecture

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

The Game Architecture

The architecture of the game board is based on the DIV container (see sketch below). This container includes 299 HTML tags, numbered 0 to 298. The tag types are also shown in the sketch below. The board is divided into several areas. The right most column is the <BR> column. This column's tags simulate a "new line" at the end of every row. The other 286 tags are <IMG> tags and constitute the game's visible board. The visible board is surrounded by a border that includes its outer images. (See the hashed images in the sketch below.) The images inside the border constitute the core of the board and is where the action takes place. The core includes 220 images, arranged in 11 rows of 20 images each. Every image on the board can be found by its row and column numbers. There are 23 columns, numbered 0 to 22. Likewise, there are 13 rows, numbered 0 to 12. The border includes columns 0 and 21, and rows 0 and 12. Column 22 is the <BR> column. As you can see from the sketch below, each image is also accessible as an element of a single array that includes all the images, numbered 0 to 298. We'll show you later in this column how to convert a row-column coordinates to a single array indexing.