Atölye › Flappy tarzı kuş › 3/30. adım

Kuşu çiz

Ne yapıyoruz

Kuşumuz sarı bir daire olacak. Önce kuş hakkında bildiklerimizi bir yerde topluyoruz: nerede duruyor, ne kadar büyük? Sonra daireyi bu bilgilere bakarak çiziyoruz.

Bu ayrım önemli: kuş hareket edince yalnız bilgileri değiştireceğiz, çizim onlara bakıp kuşu yeni yerine koyacak.

```js
let bird = { x: 100, y: 300, r: 14 }

ctx.fillStyle = 'gold'
ctx.beginPath()
ctx.arc(bird.x, bird.y, bird.r, 0, Math.PI * 2)
ctx.fill()
```

Ne işe yarıyor

let bird = → değişken tanımlar. const'tan farkı: let ile verilen adın değeri sonradan değiştirilebilir. Kuş hareket edeceği için let.
{ x: 100, y: 300, r: 14 } → bir nesne (object): etiketli bilgilerden oluşan bir kart. x soldan uzaklık, y yukarıdan uzaklık, r dairenin yarıçapı (merkezden kenara uzaklık). Bilgiler virgülle ayrılır.
bird.x → "kuşun x'i" (100). Nokta, paketin içinden bir bilgiyi okur.
ctx.fillStyle = 'gold' → altın sarısı.
Canvas'ta hazır bir "daire boya" komutu yok; daireyi önce tarif eder, sonra boyarız:
- ctx.beginPath() → "yeni bir şekle başlıyorum".
- ctx.arc(bird.x, bird.y, bird.r, 0, Math.PI * 2) → (x, y) etrafında, r yarıçaplı bir yay. Son iki sayı yayın başladığı ve bittiği açı. Açılar derece değil radyan ile verilir: tam tur 2π. Math.PI hazır π sayısı (3,14...), * çarpma. Yani 0'dan Math.PI * 2'ye: tam bir daire.
- ctx.fill() → tarif edilen şekli boya.
Kuş satırları gökyüzünden sonra yazılır: sonra çizilen, öncekinin üstüne gelir.

Sıra sende

const ctx = ... satırının altına bir boş satır bırakıp let bird = ... satırını yaz.
Dosyanın en sonuna, bir boş satırdan sonra daireyi çizen dört satırı yaz.
Çalıştır: mavi gökyüzünün solunda, ortaya yakın sarı küçük bir top görmelisin.

Beceriler: Canvas üzerine çizim, Oyun durumları

← Gökyüzünü boya Çizen bir fonksiyon →

Kuşu çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar