Atölye › Amiral Battı › 3/35. adım

Senin denizin

Ne yapıyoruz

Senin filonun denizi altta, daha küçük kareli ikinci bir deniz; üstünde de bir başlık: Your fleet (senin filon). Aynı fonksiyon onu da çizer; yalnız başka bir köşe ve başka bir boy veriyoruz.

```js
const SMALL = 20 // cell size of your own sea
const HOME = { x: 30, y: 440 }

ctx.fillStyle = 'white'
ctx.font = 'bold 14px sans-serif'
ctx.fillText('Your fleet', HOME.x, HOME.y - 10)
drawSea(HOME, SMALL)
```

Ne işe yarıyor

const SMALL = 20 → senin denizinin kare boyu. const HOME = { x: 30, y: 440 } → senin denizinin sol üst köşesi.
ctx.font = 'bold 14px sans-serif' → yazı tipi ve boyu: kalın, 14 piksel.
ctx.fillText('Your fleet', HOME.x, HOME.y - 10) → yazıyı denizin 10 piksel üstüne yazar.
drawSea(HOME, SMALL) → aynı fonksiyon, başka bilgilerle: ikinci deniz. Fonksiyon yazmanın faydası bu.

Sıra sende

const BIG ... satırının altına SMALL, const SEA ... satırının altına HOME sabitini yaz.
Kodun en sonuna, bir boş satırdan sonra dört satırı yaz.
Çalıştır: altta küçük bir deniz ve üstünde Your fleet yazısı görmelisin.

Beceriler: Canvas üzerine çizim

← Her deniz için bir fonksiyon Tekrar tekrar çiz →

Senin denizin

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar