Atölye › Yazı Yağmuru › 2/33. adım

Zemin

Ne yapıyoruz

Kelimeler bir zemine kadar düşecek: yukarıdan 330 piksel aşağıda ince, koyu kırmızı bir çizgi. Çizginin altında kalan yere ileride ekran klavyesi gelecek.

Zeminin yüksekliğine bir ad veriyoruz: GROUND. Bu sayıyı hem çizimde hem de "kelime yere değdi mi?" sorusunda kullanacağız; iki yerde aynı sayıyı tek tek yazmak yerine tek bir ad.

```js
const GROUND = 330 // words that fall past this line are gone

ctx.fillStyle = '#7f1d1d'
ctx.fillRect(0, GROUND + 4, canvas.width, 3)
```

Ne işe yarıyor

const GROUND = 330 → zeminin yüksekliği. Satırın sonundaki // ile başlayan kısım bir yorum: kendimize not. Adı büyük harfle yazmak "oyun boyunca değişmeyen bir ayar" demenin alışılmış yolu.
ctx.fillStyle = '#7f1d1d' → koyu kırmızı.
ctx.fillRect(0, GROUND + 4, canvas.width, 3) → soldan başlayan, canvas'ın eni kadar uzun, 3 piksel kalın bir şerit: bir çizgi. GROUND + 4 → 334; kelimelerin harfleri çizginin hemen üstünde bitsin diye biraz aşağıda.

Sıra sende

const ctx = ... satırının altında bir boş satır bırak ve GROUND satırını yaz.
Dosyanın en sonuna, arka plan satırlarının altına kırmızı çizginin iki satırını yaz.
Çalıştır: ekranın üçte ikisi kadar aşağıda ince kırmızı bir çizgi görmelisin.

Beceriler: Canvas üzerine çizim

← Kelimeler için bir gökyüzü Canvas'ta bir kelime →

Zemin

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar