Workshop › Mario-style Platformer › Step 2 of 37

A level made of text

What we are doing

Platform games are built from tiles: a grid of small squares, each empty or solid. Instead of placing hundreds of rectangles by hand, we write the level as text: each string is one row, each character one 32×32 tile.

```js
const TILE = 32
// The level as text: '#' ground, 'B' brick, 'o' coin, 'e' enemy, 'P' player start, 'F' flag.
const LEVEL = [
  '................................................................',
  '................................................................',
  '................................................................',
  '................................................................',
  '....................................oooo........................',
  '.........oooo........................e..........................',
  '.........BBBB.................ooo...BBBB....##..................',
  '....ooo...............#....................###.......oooo.......',
  '..P...................#...e...............####.....e.....e...F..',
  '################..############...#############..################',
  '################..############...#############..################',
]
const ROWS = LEVEL.length
const COLS = LEVEL[0].length
```

What it means

TILE is the size of one tile in pixels.
LEVEL is an array of 11 strings, each 64 characters: 11 rows and 64 columns of tiles.
LEVEL[row][col] reads one tile: first the row (a string), then the character in it. LEVEL[8][2] is 'P'.
ROWS and COLS count them: LEVEL.length is 11, LEVEL[0].length is 64.

Your turn

Under const ctx = ..., leave an empty line and write TILE, the comment, LEVEL, ROWS and COLS. You may copy the level: each row must be exactly 64 characters.

Skills: Arrays and objects

← The sky Draw the tiles →

All steps