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

Boruları çiz

Ne yapıyoruz

Şimdi deneme borusunu görünür yapıyoruz. Bir boru nesnesinden iki yeşil dikdörtgen çıkar:

üst boru:  y = 0'dan           gapY'ye kadar
alt boru:  y = gapY + GAP'ten  zemine kadar

Listede kaç boru varsa hepsini çizmek için bir döngü kullanacağız: "listedeki her boru için şunu yap".

```js
ctx.fillStyle = 'green'
for (const pipe of pipes) {
  ctx.fillRect(pipe.x, 0, PIPE_WIDTH, pipe.gapY)
  ctx.fillRect(pipe.x, pipe.gapY + GAP, PIPE_WIDTH, canvas.height - pipe.gapY - GAP)
}
```

Ne işe yarıyor

for (const pipe of pipes) { → döngü: "pipes listesindeki her eleman için, sırayla, bir kez yap". Her turda o anki boruya pipe denir.
ctx.fillRect(pipe.x, 0, PIPE_WIDTH, pipe.gapY) → üst boru: borunun x'inden, en tepeden (0) başlar; eni PIPE_WIDTH, boyu gapY (açıklığa kadar).
ctx.fillRect(pipe.x, pipe.gapY + GAP, PIPE_WIDTH, canvas.height - pipe.gapY - GAP) → alt boru: açıklığın bittiği yerden başlar. Boyu, canvas'ın boyundan açıklığın bittiği yer çıkınca kalan kısım: 600 − 200 − 160 = 240.
Borular gökyüzünden sonra, kuştan önce çizilir: önce çizilen arkada kalır, kuş boruların önünde uçar.

Sıra sende

draw içinde gökyüzünü boyayan ctx.fillRect(0, 0, ...) satırının altına bir boş satır bırak.
Boru satırlarını yaz. Kuşu çizen ctx.fillStyle = 'gold' satırı altta kalsın.
Çalıştır: kuşun sağında, arasında açıklık olan yeşil bir boru çifti görmelisin.

Beceriler: Canvas üzerine çizim, Döngüler

← Veri olarak boru Kuş değil dünya kayar →

Boruları çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar