Atölye › Mayın Tarlası › 12/26. adım
Şimdi fareyle oynayalım: tıklanan hücre açılsın. Tıklamanın hangi hücre olduğunu bulan bir fonksiyon yazacağız:
cellAt(event).
Hesap basit: x'i 40'a bölüp aşağı yuvarlarsan sütun (130 / 40 = 3,25 → 3). Satır için önce üst şeridi (40) çıkar.
Şeride ya da tahtanın dışına tıklanırsa "hücre yok" (undefined) döner.
```js
function cellAt(event) {
// The canvas may be displayed at a different size than its own pixels, so scale the pointer.
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 col = Math.floor(x / CELL)
const row = Math.floor((y - TOP) / CELL)
if (row < 0 || row >= SIZE || col < 0 || col >= SIZE) return undefined
return grid[row][col]
}
canvas.addEventListener('click', (event) => {
const cell = cellAt(event)
if (cell) reveal(cell)
})
```canvas.getBoundingClientRect() → tuvalin ekrandaki yeri ve boyu. Tuval ekranda küçültülmüş ya da büyütülmüş
olabilir; bu yüzden fare konumundan tuvalin sol üst köşesini çıkarıp canvas.width / rect.width oranıyla çarparız:
tuval pikseli.Math.floor(x / CELL) → sütun; Math.floor((y - TOP) / CELL) → satır (üst şerit hariç).row < 0 || row >= SIZE || ... → || "veya": biri bile tahtanın dışındaysa return undefined ("hücre yok").return grid[row][col] → tıklanan hücre.canvas.addEventListener('click', (event) => { ... }) → tuvale her tıklandığında çalışır; event tıklamanın
bilgilerini (clientX, clientY) taşır.if (cell) reveal(cell) → hücre bulunduysa aç; undefined "yanlış" sayılır.function draw() { satırının üstüne cellAt fonksiyonunu ve tıklama dinleyicisini yaz; ikisinden sonra birer boş
satır kalsın. Çalıştır ve hücrelere tıkla: açılıp sayılarını göstermeli. (Mayına basarsan şimdilik bir şey olmaz;
sıradaki adım.)
Beceriler: Klavye ve fare girdisi
← Renkli sayılar Mayına basmak →