Atölye › Tetris Tarzı Bloklar › 25/32. adım

Yan panel

Ne yapıyoruz

Kuyunun sağındaki boşluk artık işe yarasın: Score (puan) ve Lines (silinen satır) yazsın, her birinin altında sayısıyla.

```js
const panel = COLS * CELL + 20
ctx.fillStyle = 'white'
ctx.font = 'bold 16px sans-serif'
ctx.textAlign = 'left'
ctx.fillText('Score', panel, 180)
ctx.fillText(String(score), panel, 202)
ctx.fillText('Lines', panel, 240)
ctx.fillText(String(lines), panel, 262)
```

Ne işe yarıyor

const panel = COLS * CELL + 20 → kuyu 240 piksel; panel yazıları 20 piksel sağından, x = 260'tan başlar. Sabit bir const de bir fonksiyonun içinde tanımlanabilir; yalnız orada geçerlidir.
ctx.textAlign = 'left' → yazı verilen x'ten sağa doğru yazılsın.
String(score) → sayıyı yazıya çevirir. fillText yazı yazar; String ile ne yazılacağını açıkça söylüyoruz.

Sıra sende

draw içinde if (state === 'playing') { ... } bloğunun kapanan } satırının altına bir boş satır bırak ve panel satırlarını yaz. if (state === 'over') bloğu altta kalsın.
Çalıştır: sağda Score ve Lines görmelisin.

Beceriler: Canvas üzerine çizim

← Satırlara puan Seviyeler →

Tüm adımlar