Creating a 2-D Tile-Based Map

The first step in creating the game world is to create data structures that will represent the world. In this case I used four primary arrays:
WorldMap, to hold the map data of all areas (10 total)
Map, to hold the map data of the area the player is currently in (10 x 10)
MapTiles, a hash mapping map data characters to image tiles
Tiles, to represent the tile images as objects

The arrays separate the representation of the world as a spatial dimension with content versus the representation of the content itself (image tiles).

The tiles represent different types of traversable terrain (floors, ground, grass, etc) and non-traversable terrains (walls, doors, etc).

The world map array holds the map data of all areas the player can travel to (village, forest, dungeon or dungeon levels, etc). In this case, we are creating a world map with ten possible areas:

In this instance we have created one area map and filled it with 1's and 0's to represent traversable and non-traversable terrain. Later we will map these to actual image tiles that will be the visual representation of the terrain.

The area that the player is currently in is represented by a single 2-D array that will always be refilled whenever the player changes location. The new map data will be used to fill the screen with the new image tiles.

The function MakeMap() will be called once at initialization to create the 2-D array.

The function LoadMap() will be called whenever a player changes location. The function is called as LoadMap(WorldMap[x]) where x represents the player's new location. The function definition is below:

* The code so far is the end-result from when I began designing this game engine. It is purposefully more abstract to hold multiple maps and make the process of changing locations more concise.

Once we have the maps filled with ascii characters we need to map these characters to specific image files (in this case we are using the simplest scenario of two types of terrain: traversable (1) and non-traversable (0)).

To do this we use a hash to map the character to a particluar (64px x 64px) image file with the appropriate texture for the terrain.

MapTiles['0'] =

MapTiles['1'] =

The tiles that will be drawn to the browser screen will be represented as Javascript objects with the Tile array and executed with the DrawMap() function. This function is only called during initialization since tiles can now be swapped out when the player changes areas. This is accomplished with the FillMap() function (next).

Generating the final map is accomplished using the FillMap() function. During initialization we call:
MakeMap();
LoadMap(WorldMap[Player.location]);
DrawMap();
FillMap();
but when the player changes locations we only need call:
LoadMap(WorldMap[Player.location]);
FillMap();