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

Süreyi göster

Ne yapıyoruz

Turun yanına süresini yazalım: saniye olarak, virgülden sonra tek basamak: Lap 1/3 12.4. Kareyi saniyeye çeviren küçük bir yardımcı fonksiyon yazacağız.

```js
const seconds = (f) => (f / 60).toFixed(1)

ctx.fillText('Lap ' + lap + '/' + LAPS + '  ' + seconds(lapTime), W - 10, 22)
```

Ne işe yarıyor

• const seconds = (f) => (f / 60).toFixed(1) → f kare sayısını 60'a bölüp saniye yapar. .toFixed(1) sayıyı virgülden sonra tek basamakla yazıya çevirir: 744 kare → 12.4 saniye → '12.4'.
• Fonksiyon draw'un içinde tanımlı; sadece orada kullanılıyor.
• Tur yazısının sonuna + ' ' + seconds(lapTime) eklendi: iki boşluk ve süre.

Sıra sende

1. draw içinde ctx.fillStyle = '#0f172a' satırının üstüne seconds satırını yaz.
2. Lap satırında LAPS'ten sonra + ' ' + seconds(lapTime) ekle (tırnakların arasında iki boşluk).
3. Çalıştır: sağ üstte süre saymalı.

Beceriler: Canvas üzerine çizim

← Tur süresi En iyi tur →

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