Atölye › Amiral Battı › 1/35. adım
Seninkini batırmadan önce düşman filosunu batır ve bilgisayara avlanmayı öğret. Asla örtüşmeyen rastgele filolar, iki taraf için tek bir ateş fonksiyonu, sıralar ve ölçebileceğin üç bilgisayar oyuncusu: rastgele (yaklaşık 95 atış), avla ve hedefle (yaklaşık 56) ve her olası gemi konumunun ısı haritası (yaklaşık 44).
Amiral Battı 10×10 karelik bir denizde oynanır. İlk adımda düşmanın denizini çiziyoruz; ateş edeceğin yer burası. 100 lacivert kare, aralarında ince boşluklarla.
Kareleri tek tek yazmak yerine iki iç içe döngü kullanacağız: dıştaki satırları, içteki sütunları gezer.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const N = 10
const BIG = 36 // cell size of the enemy's sea, where you shoot
const SEA = { x: 30, y: 50 }
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#1e3a8a'
for (let r = 0; r < N; r++) {
for (let c = 0; c < N; c++) {
ctx.fillRect(SEA.x + c * BIG + 1, SEA.y + r * BIG + 1, BIG - 2, BIG - 2)
}
}
```canvas, ctx → sayfadaki canvas ve onun 2D çizim kalemi.const N = 10 → denizin boyu: 10 satır, 10 sütun.const BIG = 36 → bir karenin kenarı, 36 piksel.const SEA = { x: 30, y: 50 } → denizin sol üst köşesi; bir nesne: SEA.x 30, SEA.y 50.for (let r = 0; r < N; r++) → döngü: r (row, satır) 0'dan başlar, 10'dan küçük olduğu sürece devam eder,
her turda 1 artar (++). İçindeki for (let c ...) her satır için sütunları (column) gezer: 10 × 10 = 100 tur.SEA.x + c * BIG → c. sütunun sol kenarı; SEA.y + r * BIG → r. satırın üst kenarı.+ 1 ve BIG - 2 → kareyi 1 piksel içeriden ve 2 piksel küçük çizer: kareler arasında ince boşluklar kalır.Kodu editördeki üç yorum satırının altına yaz; boş satırları da aynen bırak. Çalıştır'a bas: üstte 10×10 lacivert bir deniz görmelisin.
Beceriler: Canvas üzerine çizim, Döngüler
Her deniz için bir fonksiyon →