Atölye › Köstebek Vurmaca › 3/18. adım

Delikleri çiz

Ne yapıyoruz

Bütün çizimi bir draw (çiz) fonksiyonunda topluyoruz, çünkü oyun ekranı saniyede onlarca kez yeniden çizecek. Önce çayır, sonra her delik için koyu kahverengi bir daire.

```js
function draw() {
  ctx.fillStyle = '#65a30d'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  for (const hole of holes) {
    ctx.fillStyle = '#3f2d1d'
    ctx.beginPath()
    ctx.arc(hole.x, hole.y, HOLE_R, 0, Math.PI * 2)
    ctx.fill()
  }
}

draw()
```

Ne işe yarıyor

• function draw() { ... } → çizim tarifi; draw() onu çalıştırır.
• for (const hole of holes) → listedeki her delik için bir kez dön; o anki deliğin adı hole.
• Daire üç adımda çizilir:
  • ctx.beginPath() → yeni bir şekle başla.
  • ctx.arc(hole.x, hole.y, HOLE_R, 0, Math.PI * 2) → merkezi (hole.x, hole.y), yarıçapı 40 olan bir yay; 0'dan Math.PI * 2'ye, yani tam tur: daire. (Açılar derece değil radyan: tam tur 2π.)
  • ctx.fill() → şeklin içini boya.

Sıra sende

1. Arka planı boyayan iki satırın üstüne function draw() { yaz, iki satırı içeri al.
2. Altlarına bir boş satır bırakıp delik döngüsünü yaz, sonra fonksiyonu } ile kapat.
3. En alta, bir boş satırdan sonra draw() yaz. Çalıştır: dokuz koyu delik görmelisin.

Beceriler: Canvas üzerine çizim, Fonksiyonlar

← Dokuz delik Saat ve döngü →

Tüm adımlar

1. Yeşil bir çayır
2. Dokuz delik
3. Delikleri çiz
4. Saat ve döngü
5. Delikte bir köstebek
6. Köstebekler çıkıyor
7. Hangi deliğe tıklandı?
8. Vur!
9. Skoru göster
10. Başlamak için tıkla
11. Süre işliyor
12. Süre bitti
13. En iyi skor
14. Turun neresindeyiz?
15. Giderek hızlan
16. Her vuruşu hatırla
17. Yükselen +1
18. Kendin yap: kombo