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

Bir taş çiz

Ne yapıyoruz

Taş çizen bir fonksiyon yazıyoruz: drawTile (taş çiz). Ona hangi taşı ve nereye çizeceğini söyleyeceğiz: drawTile(number, x, y). Şimdilik sadece turuncu bir kare çiziyor; numarayı bir sonraki adımda yazacağız.

Denemek için ilk kareye bir taş çizelim.

```js
function drawTile(number, x, y) {
  ctx.fillStyle = '#f59e0b'
  ctx.fillRect(x, y, SIZE, SIZE)
}

function draw() {
  ctx.fillStyle = '#292524'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  drawTile(1, squareX(0), squareY(0))
}
```

Ne işe yarıyor

• function drawTile(number, x, y) → üç parametre: fonksiyona çağrılırken verilen değerler. drawTile(1, 11, 60) diye çağırınca içeride number 1, x 11, y 60 olur. number'ı henüz kullanmıyoruz.
• ctx.fillStyle = '#f59e0b' → turuncu. ctx.fillRect(x, y, SIZE, SIZE) → sol üst köşesi x, y olan 90×90 kare.
• drawTile(1, squareX(0), squareY(0)) → 1 numaralı taşı 0. kareye çiz: (11, 60). Arka plandan sonra çizildiği için üstünde görünür.

Sıra sende

1. function draw() { satırının üstüne drawTile fonksiyonunu yaz; arada bir boş satır kalsın.
2. draw içinde ctx.fillRect(...) satırının altına bir boş satır bırakıp drawTile(1, squareX(0), squareY(0)) yaz.
3. Çalıştır: sol üstte turuncu bir kare görmelisin.

Beceriler: Canvas üzerine çizim, Fonksiyonlar

← Her kare nerede Taşın üstündeki sayı →

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ı