Images on the Canvas - HTML5 Canvas - page 254

Defining a Tile Map
We will use the term tile map to refer to a game level or background built from a tile sheet.
Take a look back at Figure 4-7 , which shows the four-row by eight-column tile sheet from
earlier in this chapter. If we were to create a maze-chase game similar to Pac-Man , we could
define the maze using tiles from a tile sheet. The sequence of tiles for our game maze would
be considered a tile map.
The first tile is a gray square, which we can use for the “road” tiles between the wall tiles.
Any tile that a game sprite can move on is referred to as walkable . Even though our tanks are
not literally walking but driving, the concept is the same. In Chapter 9 , we will create a small
game using these concepts, but for now, let's concentrate on defining a tile map and display-
ing it on the canvas.
Our tile map will be a two-dimensional array of tile ID numbers. If you recall, the tile ID
numbers for our tile sheet are in a single dimension, numbering from 0 to 31. Let's say we are
going to create a very small game screen consisting of 10 tiles in length and 10 tiles in height.
This means we need to define a tile map of 100 individual tiles (10×10). If our tiles are 32
pixels by 32 pixels, we will define a 320×320 game screen.
There are many ways to define a tile map. One simple way is to use a tile map editor program
to lay out a grid of tiles and then export the data to re-create the tile map in JavaScript. This is
precisely how we are going to create our tile map.