Workshop › Frogger-style Crossing › Step 1 of 22
Hop across a busy road and ride logs over a river to reach the homes. Grid movement in a real-time world, lanes that wrap around with modulo, riding moving platforms and levels that speed up.
We are building a Frogger-style game: a frog crosses a busy road, then a river on floating logs, to reach its homes. The board is 13 rows of 40 pixels: the far bank, five river rows, a safe strip, five road rows and the start.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const TILE = 40
const COLS = 12
const TOP = 40 // room for the score and the lives
const START_ROW = 12
// Rows from the top: 0 the far bank with the homes, 1-5 the river, 6 a safe strip, 7-11 the road, 12 the start.
function rowColor(row) {
if (row === 0) return '#166534'
if (row <= 5) return '#1e3a8a'
if (row === 6 || row === START_ROW) return '#4d7c0f'
return '#1f2937'
}
function draw() {
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
for (let row = 0; row <= START_ROW; row++) {
ctx.fillStyle = rowColor(row)
ctx.fillRect(0, TOP + row * TILE, canvas.width, TILE)
}
}
draw()
```TILE is a square's size; the board is 12 squares wide and 13 rows tall, under a 40-pixel bar.rowColor answers with the color of a row: the first return that matches ends the function.Write the lines under the comments, then press Run.
Skills: Drawing on a canvas