Atölye › OutRun Tarzı Yarış › 5/44. adım

Parçalardan bir yol

Ne yapıyoruz

Tek parça yol olmaz. Pist, uç uca dizilmiş 200'er birimlik 800 kısa parçadan (segment) oluşan bir liste olacak. İleride her parçaya bir kıvrım (curve) bilgisi de vereceğiz; şimdilik hepsi düz.

Bu adımda ekran değişmez: pisti bellekte kuruyoruz, çizimini sonraki adımlarda yapacağız.

```js
const SEG = 200 // length of one road segment, in world units

let segments // the track: { curve } for each segment
let trackLength

// The track is made of stretches: `count` segments bending by `curve` (0 is straight, + right, - left).
function buildTrack() {
  segments = []
  const add = (count, curve) => {
    for (let i = 0; i < count; i++) segments.push({ curve })
  }
  add(800, 0) // straight for now
  trackLength = segments.length * SEG
}

buildTrack()
```

Ne işe yarıyor

Sıra sende

  1. const H = canvas.height satırının altına SEG satırını yaz.
  2. const DEPTH = ... satırının altına bir boş satır bırak; iki let satırını, bir boş satırdan sonra yorum satırını ve buildTrack fonksiyonunu yaz.
  3. En alttaki requestAnimationFrame(loop) satırının üstüne buildTrack() yaz.
  4. Çalıştır: ekran değişmez, kontroller yeşil olmalı.

Beceriler: Diziler ve nesneler, Döngüler

Tüm adımlar

  1. Gökyüzü ve zemin
  2. Tekrar tekrar çiz
  3. Perspektif
  4. Bir parça yol
  5. Parçalardan bir yol
  6. Pistte neredeyiz?
  7. Öndeki yol
  8. Şeritler
  9. Uzaktan yakına boya
  10. Bordür ve orta çizgi
  11. Şeritli çimen
  12. Hareket tek bir sayı
  13. Hangi tuşlar basılı?
  14. Gaz pedalı
  15. Fren, boşta gitme ve azami hız
  16. Senin araban
  17. Hız göstergesi
  18. Telefon için pedal
  19. Kamerayı yana kaydır
  20. Direksiyon
  21. Duran araba dönmez
  22. Çimen yavaşlatır
  23. Dokunarak direksiyon
  24. Virajlı bir pist
  25. Yolu kıvır
  26. Virajda sıçrama olmasın
  27. Hangi parçadayım?
  28. Viraj dışarı çeker
  29. Rakip arabalar
  30. Döngüde uzaklık
  31. Uzaklaştıkça küçülen arabalar
  32. Trafik akıyor
  33. Arkadan çarpma
  34. Turları say
  35. Turu göster
  36. Tur süresi
  37. Süreyi göster
  38. En iyi tur
  39. En iyi turu göster
  40. Yarışıyor mu, bitti mi?
  41. Bitiş çizgisi
  42. Bitti!
  43. Yeniden yarış
  44. Kendin yap: saate karşı