Atölye › Pong › 20/26. adım

Kim kazandı?

Ne yapıyoruz

Oyun bitince top kaybolsun ve ortada kazanan ilan edilsin. Altına da yeniden oynamanın yolunu yazalım (tuşu sonraki adımda bağlayacağız).

```js
if (state === 'playing') ctx.fillRect(ball.x, ball.y, BALL, BALL)

if (state === 'over') {
  const winner = left.score >= WIN_SCORE ? 'Left' : 'Right'
  ctx.font = 'bold 32px sans-serif'
  ctx.fillText(winner + ' player wins!', canvas.width / 2, canvas.height / 2)
  ctx.font = '16px sans-serif'
  ctx.fillText('Press Space to play again', canvas.width / 2, canvas.height / 2 + 32)
}
```

Ne işe yarıyor

if (state === 'playing') ctx.fillRect(ball...) → top yalnız oyun sürerken çizilir.
left.score >= WIN_SCORE ? 'Left' : 'Right' → 5'e ulaşan sol oyuncuysa 'Left', değilse 'Right'.
winner + ' player wins!' → Left player wins! gibi bir yazı.
ctx.textAlign skorlar için zaten 'center' yapılmıştı; yazılar ortaya hizalanır.

Sıra sende

Topu çizen satırın başına if (state === 'playing') ekle.
draw'ın sonunda, skor satırlarının altına bir boş satır bırakıp if (state === 'over') bloğunu yaz.
Çalıştır, oyunu kaybet ya da kazan.

Beceriler: Canvas üzerine çizim

← Beşe ilk ulaşan Yeniden oyna →

Tüm adımlar