Workshop › Frogger-style Crossing › Step 2 of 22

The frog

What we are doing

The frog stands on the start row. Its place is in tiles, not pixels: column 5, row 12. Drawing turns tiles into pixels.

```js
let frog = { x: 5, y: START_ROW }

  ctx.fillStyle = '#22c55e'
  ctx.fillRect(frog.x * TILE + 6, TOP + frog.y * TILE + 6, TILE - 12, TILE - 12)
```

What it means

frog.x is the column and frog.y the row.
On screen the square starts at x * TILE, TOP + y * TILE; + 6 and - 12 leave a 6-pixel margin on each side.

Your turn

Under the rows comment, write frog.
At the end of draw, draw the frog.

Skills: Game states

← Road and river Keep drawing →

All steps