Atölye › Wordle Tarzı Kelime Tahmini › 4/26. adım
Bir tahmin beş harf; yani bir satırda beş kare var. Beş kareyi tek tek yazmak yerine bir döngü kullanacağız: "şunu 5 kez yap, her seferinde biraz sağa kay".
Satırı ortalayacağız: satırın enini tuvalin eninden çıkarıp kalanı ikiye böleriz. Boş kareler içi dolu değil, sadece çerçeve olacak.
```js
const SIZE = 56 // one letter tile
const GAP = 6
const LEFT = (canvas.width - 5 * SIZE - 4 * GAP) / 2
const TOP = 12
for (let i = 0; i < 5; i++) {
const x = LEFT + i * (SIZE + GAP)
const y = TOP
ctx.strokeStyle = '#3f3f46'
ctx.lineWidth = 2
ctx.strokeRect(x + 1, y + 1, SIZE - 2, SIZE - 2)
}
```SIZE = 56 → bir harf karesi. GAP = 6 → kareler arası boşluk. TOP = 12 → satırın üstten uzaklığı.LEFT = (canvas.width - 5 * SIZE - 4 * GAP) / 2 → 5 kare (5 × 56) ve aralarındaki 4 boşluk (4 × 6) = 304 piksel.
Tuvalin eninden (360) çıkar, ikiye böl (/): soldaki boşluk 28. Böylece satır ortalanır.for (let i = 0; i < 5; i++) { ... } → bir döngü: i 0'dan başlar, 5'ten küçük olduğu sürece tekrarlar, her
turda i++ ile 1 artar. Yani i sırayla 0, 1, 2, 3, 4.const x = LEFT + i * (SIZE + GAP) → her kare bir öncekinden 62 piksel (kare + boşluk) sağda.ctx.strokeStyle → çizgi rengi; ctx.lineWidth = 2 → çizgi kalınlığı.ctx.strokeRect(...) → dikdörtgenin sadece çerçevesini çizer (fillRect içini doldururdu). 1 piksel içeriden,
2 piksel küçük çizilir ki kalın çizgi karenin içinde kalsın.const ctx = ... satırının altına bir boş satır bırakıp dört ölçü satırını yaz.draw içinde ctx.fillRect(...) satırının altına bir boş satır bırakıp döngüyü yaz.Beceriler: Canvas üzerine çizim, Döngüler
← Çizen bir fonksiyon Altı satır →