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

Bordür ve orta çizgi

Ne yapıyoruz

Yarış pistlerinin kenarında kırmızı-beyaz bordürler, ortasında kesik beyaz bir çizgi olur. İkisini de aynı quad ile çizeceğiz. Bordür, yoldan biraz daha geniş bir yamuk; orta çizgi ise çok ince bir yamuk.

Sıra önemli: önce bordür, üstüne yol. Yol bordürün ortasını örter; geriye iki kenarda ince birer şerit kalır.

```js
const light = Math.floor(index / 3) % 2 === 0
quad(light ? '#f8fafc' : '#dc2626', near.x, near.y, near.w * 1.15, far.x, far.y, far.w * 1.15)
quad(light ? '#6b7280' : '#646b75', near.x, near.y, near.w, far.x, far.y, far.w)
if (light) quad('#f8fafc', near.x, near.y, near.w * 0.03, far.x, far.y, far.w * 0.03)
```

Ne işe yarıyor

Sıra sende

İkinci döngüde:

  1. Yolu boyayan quad(light ? '#6b7280' ... satırının üstüne bordür satırını yaz.
  2. Aynı satırın altına orta çizgi satırını yaz.
  3. Çalıştır: yolun kenarlarında kırmızı-beyaz bordürler, ortasında kesik beyaz çizgi görmelisin.

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