Workshop › Frogger-style Crossing › Step 18 of 22

Get home

What we are doing

Hopping into an empty home fills it and a new frog starts. Hopping onto the bank between homes, or into a full home, costs a life.

```js
let filled // one true/false per home
  filled = HOMES.map(() => false)

  if (frog.y === 0) reachHome()

function reachHome() {
  const i = HOMES.indexOf(frog.x)
  if (i === -1 || filled[i]) {
    die()
    return
  }
  filled[i] = true
  newFrog()
}

    if (filled[i]) {
      ctx.fillStyle = '#86efac'
      ctx.fillRect(col * TILE + 8, TOP + 8, TILE - 16, TILE - 16)
    }
```

What it means

filled has one true/false per home; HOMES.map(() => false) makes [false, false, false, false].
indexOf gives the home's number, or -1 when the column is not a home.
A filled home shows a light green frog in it.

Your turn

Under let state, write let filled; in reset, fill it with falses.
At the end of hop, call reachHome on row 0, and write reachHome under hop.
In draw, show the filled homes.

Skills: Game states

← Home slots Points for progress →

All steps