what is a tiled map and how it is declared

Question

I was recently searching for game programing and I passed throw a definition called Tiled Map I looked up for it and try to understand how its declared and how it is used to find collisions but with no success can any one give me a clear explanation for what is a tiled map and it is declared and how can I detect a collision in this map this is the website that I read :

http://rodrigo-silveira.com/html5-2d-game-programming-tutorial-gwt/#.Uf9Ivm22shC

var mapBluePrint = [
  [0, 0, 0, 0, 0, 0],
  [0, 8, 8, 8, 8, 0],
  [0, 0, 0, 0, 0, 0]
  ];

Answer 1

Wikipedia defines a tile map (also called a tile set) as:

A tile set (sometimes called a sprite sheet) is collection of smaller images called tiles (typically of uniform size) which have been combined into a single larger image. Tile sets are often used in 2D video games to create complex maps from reusable tiles within the set. When a tile set based map is displayed, the tiles that are stored within it are used to reassemble the map for display.

Tile maps are created by dividing the game into a grid of squares. Each cell can then be filled with a "tile" from an image that is composed of smaller, uniform images (such as the Mario image provided in the article). Afterwards, a 2D array (or sometimes a single array) is used to store a list of numbers, with each number corresponding to a specific tile from the image. Using an array is great because it keeps track of the row and column of the cell. In the case of your example, the number 0 typically corresponds to an empty tile (mainly because it makes checking for collision easier), while the number 8 would correspond to some part of the larger image, possibly the cloud or the bricks.

When making a tile-based game, you would typically create one or more arrays that hold the tile information for the map, and another array that holds information about where collisions occur. When you check for collisions, you would just check that the cell the user is trying to enter is empty by checking for the existence of a number. Such as:

function checkCollision(userRow, userCol) {
   if (collisionMap[userRow][userCol]) {
      // cell is not empty, handle collision
   }
   else {
      // cell is empty, carry on
   }
}

You can read another resource about tile maps from this article I wrote about it.