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

En iyi skoru hatırla

Ne yapıyoruz

Rekoru kırmak oyunun tadıdır. En iyi skoru tutacağız ve sayfa kapansa bile unutulmayacak.

Bunun için tarayıcının küçük not defterini kullanırız: localStorage. Oraya bir ad ile bir yazı kaydedersin; sayfayı kapatıp açsan bile yerinde durur.

```js
let best = Number(localStorage.getItem('snake-best')) || 0

    if (score > best) {
      best = score
      localStorage.setItem('snake-best', best)
    }

  ctx.fillText('Best: ' + best, 8, 40)
```

Ne işe yarıyor

• localStorage.getItem('snake-best') → not defterinden snake-best adlı kaydı okur. İlk oyunda kayıt yoktur: null gelir.
• Number(...) → kayıtlar hep yazıdır ('7'); Number onu sayıya (7) çevirir.
• || 0 → soldaki bir şey vermezse (kayıt yoksa) 0 kullan.
• if (score > best) → oyun biterken skor rekordan büyükse:
  • best = score → yeni rekor.
  • localStorage.setItem('snake-best', best) → deftere yaz.
• ctx.fillText('Best: ' + best, 8, 40) → skorun 20 piksel altına rekoru yaz.

Sıra sende

1. let gameOver satırının altına best satırını yaz.
2. update içinde gameOver = true satırının altına if (score > best) { ... } bloğunu yaz (return'den önce).
3. draw içinde Score satırının altına Best satırını yaz.
4. Çalıştır, birkaç yem ye, çarp; sonra sayfayı yenile: rekor durmalı.

Beceriler: Oyun durumları

← Boşlukla yeniden oyna Büyüdükçe hızlan →

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ç