Atölye › XOX › 24/33. adım
Tur bitince tahta kilitli kalıyor. Şimdi: tur bittiyse bir sonraki tıklama yeni tur başlatsın, bitmediyse eskisi gibi hamle yapsın.
Oyuncu bunu nereden bilecek? Sonucun altına küçük bir yazı ekleyeceğiz: Click to play again (tekrar oynamak için
tıkla).
```js
canvas.addEventListener('click', (event) => {
if (result) {
reset()
} else {
// The canvas may be displayed at a different size than its 300×300 pixels, so scale the click.
const rect = canvas.getBoundingClientRect()
const x = (event.clientX - rect.left) * (canvas.width / rect.width)
const y = (event.clientY - rect.top) * (canvas.height / rect.height)
const index = Math.floor(y / CELL) * 3 + Math.floor(x / CELL)
play(index)
}
draw()
})
ctx.font = '14px sans-serif'
ctx.fillText('Click to play again', canvas.width / 2, 172)
```if (result) { → tur bittiyse...reset() → ...yeni tur başlat.} else { → else "değilse" demek: tur bitmediyse eski satırlar çalışır (ölçekleme, kutu, play).
Bu satırlar else'in içine girdiği için iki boşluk daha içeri kayar; başka hiçbir yerleri değişmez.draw() → if/else'in dışında: iki durumda da tahta yeniden çizilir.ctx.font = '14px sans-serif' ve ctx.fillText('Click to play again', canvas.width / 2, 172) → draw içinde,
sonuç yazısının altına küçük bir ipucu. 172, 140'ın biraz altı.if (result) {, reset() ve } else { satırlarını yaz.play(index)'e kadar) iki boşluk daha içeri al ve altlarına } yaz. draw() onun altında kalsın.draw içinde sonucu yazan ctx.fillText(result === 'draw' ? ...) satırının altına iki yeni satırı yaz.Beceriler: Klavye ve fare girdisi, Oyun durumları
← Yeni tur fonksiyonu Kutu seçen bir bilgisayar →