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

Yan panel

Ne yapıyoruz

Küçük denizinin yanında boş yer var. Oraya bir bilgi paneli koyalım: kaç atış yaptın, rekorun ne, düşmanın hangi uzunlukta gemileri hâlâ yüzüyor, hangi tuş ne yapıyor.

```js
const x = HOME.x + N * SMALL + 20
ctx.fillStyle = 'white'
ctx.font = '14px sans-serif'
ctx.fillText('Shots ' + shots, x, HOME.y + 16)
ctx.fillText('Best ' + (best || '-'), x, HOME.y + 38)
ctx.fillText('Left: ' + enemyFleet.filter((s) => !sunk(s)).map((s) => s.cells.length).join(' '), x, HOME.y + 60)
ctx.fillText('H: their heat map', x, HOME.y + 82)
if (state !== 'playing') ctx.fillText('Tap or Enter: again', x, HOME.y + 104)
```

Ne işe yarıyor

const x = HOME.x + N * SMALL + 20 → küçük denizin sağ kenarından 20 piksel sağ.
best || '-' → rekor 0 (yok) ise çizgi göster.
enemyFleet.filter((s) => !sunk(s)) → batmamış düşman gemileri; .map((s) => s.cells.length) → uzunlukları; .join(' ') → aralarına boşluk koyarak tek bir metin: 5 3 2.
Her satır bir öncekinin 22 piksel altında.

Sıra sende

draw'ın sonunda, senin filonu çizen drawSea(HOME, ...) satırının altına panel satırlarını yaz. Çalıştır. Oyun bitti!

Beceriler: Canvas üzerine çizim

← En iyi oyunun Kendin yap: gemiler ayrı →

Tüm adımlar