Atölye › Köstebek Vurmaca › 12/18. adım

Süre bitti

Ne yapıyoruz

Tur bitince çayırın ortasına koyu, yarı saydam bir bant çekip sonucu yazalım. Tekrar oynamak için tıklamak zaten çalışıyor: oyun oynanmıyorken her tıklama start'ı çağırıyor.

```js
if (state === 'over') {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'
  ctx.fillRect(0, 150, canvas.width, 150)
  ctx.fillStyle = 'white'
  ctx.font = 'bold 30px sans-serif'
  ctx.fillText("Time's up!", canvas.width / 2, 190)
  ctx.font = '20px sans-serif'
  ctx.fillText('Score: ' + score, canvas.width / 2, 225)
  ctx.font = '16px sans-serif'
  ctx.fillText('Click to play again', canvas.width / 2, 282)
}
```

Ne işe yarıyor

rgba(0, 0, 0, 0.6) → %60 koyulukta siyah: bant yarı saydam, altındaki çayır seçilir.
ctx.fillRect(0, 150, canvas.width, 150) → boydan boya, 150 piksel yüksekliğinde bant.
"Time's up!" → metnin içinde kesme işareti (') olduğu için çift tırnak kullanıyoruz; tek tırnak kullansaydık metin orada biterdi.
Her satır farklı boyda yazı: başlık büyük, skor orta, yardım küçük.

Sıra sende

draw'ın sonunda, if (state === 'ready') bloğunun altına over bloğunu yaz. Çalıştır ve bir turu bitir.

Beceriler: Canvas üzerine çizim

← Süre işliyor En iyi skor →

Tüm adımlar