Atölye › Kule Savunması › 35/42. adım

Oyun bitti ekranı

Ne yapıyoruz

Oyun bitince tahtanın üstüne yarı saydam koyu bir perde çekiyoruz ve üstüne sonucu yazıyoruz: kaç dalgaya dayandın, rekorun ne, yeniden nasıl oynanır.

```js
ctx.textAlign = 'center'
if (state === 'over') {
  ctx.fillStyle = 'rgba(15, 23, 42, 0.8)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = 'white'
  ctx.font = 'bold 32px sans-serif'
  ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2)
  ctx.font = '18px sans-serif'
  ctx.fillText('Survived ' + (wave - 1) + ' waves (best ' + best + ')', canvas.width / 2, canvas.height / 2 + 30)
  ctx.fillText('Press Space to play again', canvas.width / 2, canvas.height / 2 + 56)
}
```

Ne işe yarıyor

ctx.textAlign = 'center' → yazılar verilen noktaya ortalansın.
rgba(15, 23, 42, 0.8) → koyu lacivert, %80 koyuluk: altındaki tahta hafifçe görünür.
ctx.fillRect(0, 0, canvas.width, canvas.height) → perde bütün tuvali kaplar. draw'ın en sonunda çizildiği için her şeyin üstüne gelir.
'Survived ' + (wave - 1) + ... → parantez önce çıkarmayı yaptırır; parantezsiz olsaydı + metinleri yapıştırıp saçma bir sonuç verirdi.
Son satır bir sonraki adımda çalışacak tuşu söylüyor.

Sıra sende

draw fonksiyonunun sonunda, Gold yazısının altına bloğu yaz (fonksiyonun kapanan } işaretinden önce). Çalıştır ve kaybet.

Beceriler: Canvas üzerine çizim

← En çok dayanılan dalga Yeniden oyna →

Tüm adımlar