Workshop › Battleship › Step 2 of 35

A function for any sea

What we are doing

There will be two seas: the enemy's, big, and yours, small. We turn the drawing into a function, drawSea(origin, size), that can draw a sea anywhere and at any size.

```js
function drawSea(origin, size) {
  for (let r = 0; r < N; r++) {
    for (let c = 0; c < N; c++) {
      const x = origin.x + c * size
      const y = origin.y + r * size
      ctx.fillStyle = '#1e3a8a'
      ctx.fillRect(x + 1, y + 1, size - 2, size - 2)
    }
  }
}

drawSea(SEA, BIG)
```

What it means

origin and size are parameters: drawSea(SEA, BIG) runs the function with origin = SEA and size = BIG.
x and y are the square's top-left corner, computed once and used below.
The fill color is set inside the loop because later squares will get other colors.

Your turn

Turn the two loops into drawSea above the background lines, and call drawSea(SEA, BIG) under the background.

Skills: Functions

← A 10 by 10 sea Your own sea →

All steps