Atölye › Amiral Battı › 30/35. adım

Klavye imleci

Ne yapıyoruz

Fare olmadan da oynanabilsin: sarı bir çerçeve klavyenin üstünde durduğu kareyi göstersin. Bu adımda çerçeveyi çiziyoruz; ok tuşlarıyla hareketi sonraki adımda.

```js
let cursor // { r, c } for the keyboard
  cursor = { r: 0, c: 0 }

  if (state === 'playing') {
    ctx.strokeStyle = '#fde047'
    ctx.strokeRect(SEA.x + cursor.c * BIG + 1, SEA.y + cursor.r * BIG + 1, BIG - 2, BIG - 2)
  }
```

Ne işe yarıyor

• let cursor → imlecin satırı (r) ve sütunu (c). reset onu sol üst köşeye koyar.
• ctx.strokeRect(...) → fillRect'in kardeşi: içini doldurmaz, yalnız kenar çizgisini çizer.
• SEA.x + cursor.c * BIG + 1 → karenin sol kenarı (1 piksel içeriden).
• Yalnız oyun sürerken çizilir.

Sıra sende

1. let showHeat satırının altına let cursor ..., reset içinde showHeat = false satırının altına cursor = { r: 0, c: 0 } yaz.
2. draw içinde batık gemileri çerçeveleyen for döngüsünün kapanan } işaretinin hemen altına bloğu yaz.
3. Çalıştır: sol üst karede sarı bir çerçeve görmelisin.

Beceriler: Canvas üzerine çizim

← Sonunda gemilerini göster Oklarla gez →

Tüm adımlar

1. 10'a 10 bir deniz
2. Her deniz için bir fonksiyon
3. Senin denizin
4. Tekrar tekrar çiz
5. Liste olarak ızgara ve gemi
6. Rastgele bir filo
7. İki filo
8. Burada hangi gemi var?
9. Bir kareye ateş et
10. Atışları göster
11. Senin atışın
12. Dokun ve ateş et
13. Bir mesaj satırı
14. İsabet mi, ıska mı?
15. Kendi filonu gör
16. Gemi batırmak
17. Batık gemide koyu isabetler
18. Batık gemilerin çerçevesi
19. En az atışla kazan
20. Onların atışlarının kaydı
21. Sırayla
22. Bilgisayar karşılık veriyor
23. Kaybetmek de var
24. Isı haritası
25. En sıcak kareye ateş
26. İsabetin çevresini ara
27. Isı haritasını gör
28. Isı için H
29. Sonunda gemilerini göster
30. Klavye imleci
31. Oklarla gez
32. Enter ile ateş, yeniden oyna
33. En iyi oyunun
34. Yan panel
35. Kendin yap: gemiler ayrı