Atölye › Frogger Tarzı Karşıya Geçiş › 13/22. adım

Nehirdeki kütükler

Ne yapıyoruz

Nehre beş şerit yüzen kütük ekliyoruz. Kütük şeridi, yol şeridinin tıpkısı; yalnız log: true (kütük) işareti var. Hareket eden, dizilen, tekrar eden her şey aynı koddan geliyor. Kütükler kahverengi ve arabalardan biraz kalın çiziliyor.

```js
{ row: 1, speed: 0.025, len: 3, spacing: 5, log: true },
{ row: 2, speed: -0.035, len: 4, spacing: 6, log: true },
{ row: 3, speed: 0.02, len: 2, spacing: 4, log: true },
{ row: 4, speed: -0.03, len: 3, spacing: 5, log: true },
{ row: 5, speed: 0.04, len: 4, spacing: 6, log: true },

  ctx.fillStyle = lane.log ? '#92400e' : lane.color
  const inset = lane.log ? 4 : 6
  for (const x of items(lane)) {
    ctx.fillRect(x * TILE + 2, TOP + lane.row * TILE + inset, lane.len * TILE - 4, TILE - inset * 2)
  }
```

Ne işe yarıyor

• Beş yeni şerit LANES'in başına eklendi: satır 1–5, log: true. Renkleri yok, çünkü hepsi kahverengi.
• lane.log ? '#92400e' : lane.color → kütükse kahverengi, değilse şeridin rengi.
• const inset = lane.log ? 4 : 6 → üstte ve altta bırakılan boşluk: kütükte 4, arabada 6 piksel. Yükseklik TILE - inset * 2.
• Kütükler de items ile yerleşiyor ve update ile kayıyor; bunun için yeni kod gerekmedi.

Sıra sende

1. LANES listesinin başına beş kütük şeridini yaz.
2. draw'daki şerit döngüsünde rengi ve inset'i koddaki gibi seç; fillRect'te 6 yerine inset, TILE - 12 yerine TILE - inset * 2 yaz.
3. Çalıştır. (Şimdilik kurbağa suyun üstünde yürüyebiliyor; sonraki adımda düzelecek.)

Beceriler: Diziler ve nesneler

← Dokunarak yeniden oyna Kütüklerde kal →

Tüm adımlar

1. Yol ve nehir
2. Kurbağa
3. Çizmeye devam
4. Zıpla
5. Kaydırarak zıpla
6. Trafik şeritleri
7. Arabalar
8. Trafik akıyor
9. Araba çarptı
10. Üç can
11. Yeniden oyna
12. Dokunarak yeniden oyna
13. Nehirdeki kütükler
14. Kütüklerde kal
15. Kütüğe bin
16. Yeniden hizaya
17. Ev yuvaları
18. Eve var
19. İlerlemeye puan
20. Sonraki seviye
21. En iyi skor
22. Kendin yap: süre sınırı