Atölye › 2048 › 5/26. adım

Karolara sayılar

Ne yapıyoruz

Her karonun ortasına sayısını yazıyoruz. Açık renkli 2 ve 4'te koyu gri, daha koyu renkli büyük sayılarda beyaz yazı okunur.

Yazıyı hücrenin tam ortasına koymak için kaleme iki ayar veriyoruz: yatayda ortala, dikeyde ortala.

```js
ctx.textBaseline = 'middle'

ctx.textAlign = 'center'

    if (value !== 0) {
      ctx.fillStyle = value <= 4 ? '#776e65' : '#f9f6f2'
      ctx.font = 'bold 40px sans-serif'
      ctx.fillText(String(value), cellX(col) + CELL / 2, cellY(row) + CELL / 2)
    }
```

Ne işe yarıyor

Sıra sende

  1. draw içinde tahtayı boyayan fillRect satırının altındaki boş satırdan sonra ctx.textBaseline = 'middle' yaz, bir boş satır bırak, sonra ctx.textAlign = 'center' yaz (döngü bunun hemen altında kalır).
  2. Döngüde hücreyi çizen ctx.fillRect(cellX(col), ...) satırının altına if bloğunu yaz.
  3. Çalıştır.

Beceriler: Canvas üzerine çizim

Tüm adımlar

  1. Tahta
  2. On altı hücre
  3. Sayılardan bir ızgara
  4. Her sayıya bir renk
  5. Karolara sayılar
  6. Büyük sayı, küçük yazı
  7. Boş hücreleri bul
  8. Yeni bir karo
  9. Başlangıçta iki karo
  10. Bir satırı kaydır
  11. Eşit karoları birleştir
  12. Sola hareket
  13. Ok tuşu
  14. Yalnız gerçek hamleler sayılır
  15. Sağ, ters çevrilmiş sol
  16. Yukarı ve aşağı sütunlardır
  17. Skor
  18. Hamle kaldı mı?
  19. Oyun bitti
  20. 2048 yapmak
  21. Kazanma ve kaybetme ekranları
  22. Devam için Boşluk
  23. Rekor
  24. Kaydırmalar
  25. Dokunmak kaydırmak değildir
  26. Kendin yap: geri al