Atölye › Angry Birds Tarzı Sapan › 5/47. adım

Sapanda bir kuş

Ne yapıyoruz

Sıra kuşta: sapanın tepesine oturan kırmızı bir daire. Yarıçapı BIRD (10 piksel) olacak.

Kuşun rengini MATERIALS (malzemeler) adlı bir tabloya yazıyoruz. Şimdilik içinde yalnız kuş var; ileride tahta, taş ve domuzlar da buraya gelecek. Her şeyin rengi ve ağırlığı tek bir yerde durursa oyunu ayarlamak kolaylaşır.

```js
const BIRD = 10 // the bird is a 20 by 20 box
const MATERIALS = {
  bird: { color: '#dc2626', density: 4 },
}

  ctx.fillStyle = MATERIALS.bird.color
  ctx.beginPath()
  ctx.arc(SLING.x, SLING.y, BIRD, 0, Math.PI * 2)
  ctx.fill()
```

Ne işe yarıyor

const BIRD = 10 → kuşun yarıçapı. Çapı 20: kuş aslında 20 × 20'lik bir kutuya sığar (yorum bunu söylüyor).
const MATERIALS = { bird: { ... } } → nesnenin içinde nesne. MATERIALS.bird kuşun malzemesi, MATERIALS.bird.color onun rengi ('#dc2626', kırmızı). density (yoğunluk) şimdilik kullanılmıyor; ileride ağır şeylerin ağır olmasını o sağlayacak.
ctx.fillStyle = MATERIALS.bird.color → kalemi kuşun rengine boyar.
Daire bir yol (path) olarak çizilir:
- ctx.beginPath() → yeni bir şekle başla (eski şekille karışmasın).
- ctx.arc(x, y, yarıçap, başlangıç, bitiş) → (x, y) merkezli bir çember çizer. 0'dan Math.PI * 2'ye kadar, yani tam tur.
- ctx.fill() → şeklin içini boyar.

Sıra sende

const SLING = ... satırının hemen altına BIRD ve MATERIALS'ı yaz.
draw içinde, direği çizen ctx.fillRect(SLING.x - 4, ...) satırının altına daireyi çizen dört satırı yaz.
Çalıştır: direğin tepesinde kırmızı bir kuş görmelisin.

Beceriler: Canvas üzerine çizim

← Nişan: bir açı ve bir çekiş Kuşu geri çek →

Sapanda bir kuş

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar