Atölye › Yılan › 23/28. adım

Skoru göster

Ne yapıyoruz

Puanı sayıyoruz ama oyuncu göremiyor. Sol üst köşeye her karede Score: 3 gibi yazacağız.

Beyaz rengi artık skor yazısı seçtiği için "Game Over" bloğundaki ctx.fillStyle = 'white' satırına gerek kalmıyor; onu siliyoruz.

```js
ctx.fillStyle = 'white'
ctx.font = '16px sans-serif'
ctx.textAlign = 'left'
ctx.fillText('Score: ' + score, 8, 20)
```

Ne işe yarıyor

• ctx.textAlign = 'left' → yazı verdiğimiz noktadan sağa doğru başlasın.
• 'Score: ' + score → metinle sayıyı yan yana ekler: score 3 ise Score: 3 olur. + metinlerde "yapıştır" demektir.
• 8, 20 → soldan 8, yukarıdan 20 piksel: sol üst köşe.
• "Game Over" bloğu bu satırlardan sonra çizildiği için beyaz renk zaten seçili; oradaki fillStyle satırı gereksiz.

Sıra sende

1. Yılanı çizen for döngüsünün altına bir boş satır bırak ve dört skor satırını yaz.
2. if (gameOver) { bloğunun içindeki ctx.fillStyle = 'white' satırını sil.
3. Çalıştır ve bir yem ye: sol üstte skor artmalı.

Beceriler: Canvas üzerine çizim

← Oyun bitti yazısı Oyunu başlatan tek fonksiyon →

Tüm adımlar

1. Canvas'ı bul
2. Kalemi al
3. Tahtayı boya
4. Hücrelerle düşün
5. Yeri bir değişkende tut
6. Çizen bir fonksiyon
7. Hareket ettiren bir fonksiyon
8. Oyun döngüsü
9. Yavaşlat
10. Gidilecek yön
11. Ok tuşlarıyla yönlendir
12. Listeden bir gövde
13. Bütün gövdeyi yürüt
14. Yeme bir yer seç
15. Yemi çiz
16. Ye ve büyü
17. Yemi yılanın üstüne koyma
18. Yön tablosu
19. Geri dönüş yok
20. Duvara çarpma
21. Kendine çarpma
22. Oyun bitti yazısı
23. Skoru göster
24. Oyunu başlatan tek fonksiyon
25. Boşlukla yeniden oyna
26. En iyi skoru hatırla
27. Büyüdükçe hızlan
28. Kendin yap: duvarlardan geç