Workshop › Mario-style Platformer › Step 3 of 37

Draw the tiles

What we are doing

Two nested loops visit every tile. Ground and brick tiles are drawn as TILE × TILE squares, at their column and row times TILE, in the color COLORS gives them.

```js
const COLORS = { '#': '#78350f', B: '#c2410c' }

  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      const tile = LEVEL[row][col]
      if (tile === '#' || tile === 'B') {
        ctx.fillStyle = COLORS[tile]
        ctx.fillRect(col * TILE, row * TILE, TILE, TILE)
      }
    }
  }
```

What it means

COLORS maps a tile character to a color. '#' needs quotes as a key; B does not.
The outer loop goes over the rows, the inner one over the columns: every tile once.
A tile's pixel position is its column and row times TILE: column 9, row 6 is at (288, 192).

Your turn

Under COLS write COLORS.
In draw, after the sky, leave an empty line and write the two loops. Press Run.

Skills: Drawing on a canvas, Loops

← A level made of text What is solid? →

All steps