Atölye › 15 Bulmacası › 6/27. adım

Her kare nerede

Ne yapıyoruz

Şimdi piksellere geçiyoruz. Her kare 90 piksel (SIZE), kareler arasında 6 piksel aralık (GAP) olacak. Tahtayı yatayda ortalayacağız; üstte de yazılar için 60 piksellik bir şerit bırakacağız.

İki küçük fonksiyon i. karenin sol üst köşesini verecek: squareX(i) ve squareY(i).

```js
const SIZE = 90
const GAP = 6
const LEFT = (canvas.width - N * SIZE - (N - 1) * GAP) / 2
const TOP = 60

function squareX(i) {
  return LEFT + colOf(i) * (SIZE + GAP)
}
function squareY(i) {
  return TOP + rowOf(i) * (SIZE + GAP)
}
```

Ne işe yarıyor

• SIZE = 90 → karenin kenarı. GAP = 6 → kareler arası aralık. TOP = 60 → üstteki yazı şeridi.
• LEFT = (canvas.width - N * SIZE - (N - 1) * GAP) / 2 → tahtanın eni: 4 kare (4 × 90) + aralarındaki 3 aralık (3 × 6) = 378. Tuvalin eninden (400) çıkar, ikiye böl (/): soldaki boşluk 11. Böylece tahta ortalanır.
• function squareX(i) { return ... } → return sonucu geri verir; squareX(6) bir sayı olur.
• LEFT + colOf(i) * (SIZE + GAP) → her sütun bir öncekinden 96 piksel (kare + aralık) sağda.
• squareY aynısı, satırlar için ve TOP'tan başlayarak.

Sıra sende

1. const N = 4 ... satırının altına dört ölçü satırını yaz.
2. function draw() { satırının üstüne squareX ve squareY fonksiyonlarını yaz; draw ile arada bir boş satır kalsın.
3. Çalıştır. Ekran değişmez; kontroller hesabı deniyor.

Beceriler: Canvas üzerine çizim, Fonksiyonlar

← Satır ve sütun Bir taş çiz →

Tüm adımlar

1. Tek listede bir tahta
2. Tuval ve kalem
3. Masayı boya
4. Çizen bir fonksiyon
5. Satır ve sütun
6. Her kare nerede
7. Bir taş çiz
8. Taşın üstündeki sayı
9. Bütün taşlar
10. Tekrar tekrar çiz
11. N'den çözülmüş tahta
12. Komşular
13. Taş kaydır
14. Taşa tıkla
15. Ok tuşları
16. Hamleleri say
17. Gerçek kaydırmalarla karıştır
18. Hangi tahtalar çözülür?
19. Çözüldü mü?
20. Kaymayı hatırla
21. Kareleri say
22. Akıcı kayma
23. Çözüldü!
24. Kazandığını göster
25. Yeniden oyna
26. Kırılacak bir rekor
27. Kendin yap: bir süre sayacı