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

Trafik şeritleri

Ne yapıyoruz

Her yol satırı bir şerit: hangi satır, ne kadar hızlı, arabaları ne kadar uzun ve ne sıklıkta. Bir şeritteki arabalar eşit aralıkla dizilir ve desen tekrar eder. Tekrarın boyu (period) arabaların aralığının tam katı ve ekrandan (artı bir araba) geniş olmalı; yoksa arabalar ekranın içinde birden kaybolup belirirdi.

Bu adımda yalnız bilgiyi ve hesabı yazıyoruz; arabaları sonraki adımda çiziyoruz.

```js
// speed is in tiles per frame (negative = to the left), len and spacing in tiles.
const LANES = [
  { row: 7, speed: -0.05, len: 1, spacing: 4, color: '#ef4444' },
  { row: 8, speed: 0.035, len: 2, spacing: 6, color: '#f59e0b' },
  { row: 9, speed: -0.06, len: 1, spacing: 5, color: '#e879f9' },
  { row: 10, speed: 0.03, len: 1, spacing: 4, color: '#38bdf8' },
  { row: 11, speed: -0.025, len: 2, spacing: 5, color: '#f97316' },
]

for (const lane of LANES) lane.offset = 0

// A lane repeats every `period` tiles, which is always wider than the screen plus one car or log.
function period(lane) {
  return lane.spacing * Math.ceil((COLS + lane.len) / lane.spacing)
}
```

Ne işe yarıyor

Sıra sende

  1. // Rows from the top ... yorumunun altına yeni yorumu ve LANES listesini yaz.
  2. frog satırının altına offset satırını, bir boş satırdan sonra yorumu ve period fonksiyonunu yaz.
  3. Çalıştır.

Beceriler: Diziler ve nesneler

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ı