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

Kazanma ve kaybetme ekranları

Ne yapıyoruz

Oyun durunca oyuncu nedenini görmeli. Tahtanın üstüne yarı saydam bir katman çizip üstüne mesaj yazacağız: kazandıysa altın rengi ve You win!, bittiyse soluk bir katman ve Game Over. Altta küçük bir yazı ne yapılacağını söyleyecek.

```js
if (state !== 'playing') {
  ctx.fillStyle = state === 'won' ? 'rgba(237, 194, 46, 0.5)' : 'rgba(238, 228, 218, 0.75)'
  ctx.fillRect(0, TOP, canvas.width, canvas.width)
  ctx.fillStyle = state === 'won' ? '#f9f6f2' : '#776e65'
  ctx.font = 'bold 44px sans-serif'
  ctx.fillText(state === 'won' ? 'You win!' : 'Game Over', canvas.width / 2, TOP + 170)
  ctx.font = '18px sans-serif'
  ctx.fillText(state === 'won' ? 'Press Space to keep going' : 'Press Space to try again', canvas.width / 2, TOP + 220)
}
```

Ne işe yarıyor

if (state !== 'playing') → yalnız oyun durduğunda. draw'un sonunda olduğu için tahtanın üstüne çizilir.
'rgba(237, 194, 46, 0.5)' → kırmızı, yeşil, mavi (0-255) ve saydamlık (0 tam saydam, 1 tam dolu). 0.5 ile karolar altından görünür.
Her satır iki ekrandan birini seçer: state === 'won' ? kazanınca : bitince.
Yazılar ortalı; textAlign hücre sayılarından beri 'center'. TOP + 170 tahtanın ortasına yakın.

Sıra sende

draw'un sonunda, döngülerin kapanışından sonra bir boş satır bırak ve if bloğunu yaz; fonksiyonun son }'si altta kalsın. Çalıştır.

Beceriler: Canvas üzerine çizim

← 2048 yapmak Devam için Boşluk →

Tüm adımlar