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

Hız göstergesi

Ne yapıyoruz

Sol üste bir hız göstergesi koyalım. Hızımız "kare başına dünya birimi" cinsinden; bu insana bir şey söylemez. Onu tanıdık bir sayıya çevireceğiz: en yüksek hız ekranda 300 km/h görünsün.

```js
ctx.fillStyle = '#0f172a'
ctx.font = 'bold 16px sans-serif'
ctx.textAlign = 'left'
ctx.fillText(Math.round((speed / MAX_SPEED) * 300) + ' km/h', 10, 22)
```

Ne işe yarıyor

ctx.font = 'bold 16px sans-serif' → yazı tipi: kalın, 16 piksel.
ctx.textAlign = 'left' → yazı, verilen noktadan sağa doğru yazılır.
speed / MAX_SPEED → hızın en yüksek hıza oranı: dururken 0, tam gazda 1. * 300 bunu 0–300 arasına taşır.
Math.round(...) → en yakın tam sayıya yuvarlar: 147.6 → 148.
+ ' km/h' → sayıyla yazıyı yan yana koyar: 148 + ' km/h' → '148 km/h'.
ctx.fillText(yazı, 10, 22) → yazıyı soldan 10, üstten 22 pikselde boyar.

Sıra sende

Arabanın son tekerlek satırının (ctx.fillRect(W / 2 + 24, ...)) altına bir boş satır bırak ve dört gösterge satırını yaz. Çalıştır, hızlan: sol üstteki sayı 300'e kadar çıkmalı.

Beceriler: Canvas üzerine çizim

← Senin araban Telefon için pedal →

Tüm adımlar