Atölye › OutRun Tarzı Yarış › 31/44. adım
Arabayı nereye ve ne büyüklükte çizeceğiz? Hilesi şu: arabanın bulunduğu parça, yol çizilirken zaten ekrana
çevrilmişti ve shown listesinde duruyor. O parçanın yakın kenarı bize ekrandaki yeri ve yolun oradaki genişliğini
söylüyor.
Arabayı yolun genişliğinin üçte biri kadar çizersek uzaktaki araba minik, yakındaki büyük çıkar. Eski oyunlardaki bütün ölçekleme sırrı bu. Uzaktakileri önce çizeceğiz ki yakındakiler onları örtsün.
```js
// The other cars, far ones first, sized by their distance.
const visible = cars
.map((car) => ({ car, gap: ahead(position, car.z) }))
.filter((c) => c.gap > PLAYER_Z * 0.5 && c.gap < DRAW * SEG)
.sort((a, b) => b.gap - a.gap)
for (const { car } of visible) {
const seg = shown.find((s) => s.index === Math.floor(car.z / SEG) % segments.length)
if (!seg) continue
const w = seg.near.w * 0.35
ctx.fillStyle = '#facc15'
ctx.fillRect(seg.near.x + car.x * seg.near.w - w / 2, seg.near.y - w * 0.6, w, w * 0.6)
}
```.map((car) => ({ car, gap: ... })) → her arabayı, kameranın ne kadar önünde olduğuyla (gap, aralık) eşleyip
yeni bir liste yapar. Nesneyi parantez içine alıyoruz ki { fonksiyon gövdesi sanılmasın..filter(...) → sadece şartı tutanları bırakır: arabanın çok yakınında olmayan (PLAYER_Z * 0.5'ten uzak) ve çizdiğimiz
yolun içinde kalan (DRAW * SEG'den yakın) arabalar..sort((a, b) => b.gap - a.gap) → listeyi gap'e göre büyükten küçüğe dizer: en uzak önce.for (const { car } of visible) → listedeki her eleman için, içinden car'ı çıkarıp { } içini yap.shown.find(...) → şartı tutan ilk elemanı verir: bu arabanın parçası. Yoksa undefined (hiçbir şey).if (!seg) continue → ! "değil": parça bulunamadıysa bu arabayı bırak, sıradakine geç.w = seg.near.w * 0.35 → arabanın eni o uzaklıktaki yola göre; boyu w * 0.6.seg.near.x + car.x * seg.near.w → yolun ortası + arabanın şeridi. - w / 2 ortalar, seg.near.y - w * 0.6 arabayı
yolun üstüne oturtur.draw içinde // Your car. yorumunun üstüne rakip arabaları çizen kodu yaz; altında bir boş satır kalsın.
Çalıştır, hızlan: ileride sarı arabalar görmeli, yaklaştıkça büyüdüklerini izlemelisin. (Henüz yerlerinde
duruyorlar.)
Beceriler: Canvas üzerine çizim, Diziler ve nesneler
← Döngüde uzaklık Trafik akıyor →