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

Şeritler

Ne yapıyoruz

Düz gri bir yol hareket etse bile kıpırdamıyor gibi görünür: üstünde gözün takip edeceği bir iz yok. Parçaları üçer üçer bir açık, bir koyu boyayacağız. Yol akmaya başlayınca bu şeritler sana doğru koşacak ve hızı hissettirecek.

```js
for (let i = 0; i < DRAW; i++) {
  const index = (base + i) % segments.length
  const z = (base + i) * SEG - position
  const near = project(0, -CAMERA_HEIGHT, z)
  const far = project(0, -CAMERA_HEIGHT, z + SEG)
  const light = Math.floor(index / 3) % 2 === 0
  if (z > 0) quad(light ? '#6b7280' : '#646b75', near.x, near.y, near.w, far.x, far.y, far.w)
}
```

Ne işe yarıyor

Sıra sende

  1. for (...) satırının hemen altına index satırını yaz.
  2. if (z > 0) satırının üstüne light satırını yaz.
  3. Aynı satırda quad( içindeki '#6b7280' rengini light ? '#6b7280' : '#646b75' yap.
  4. Çalıştır: yolda açık ve koyu şeritler görmelisin. Renkler birbirine yakın, dikkatli bak.

Beceriler: Canvas üzerine çizim

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şı