Atölye › XOX › 15/33. adım
Tıklama olayı farenin nerede olduğunu söyler, ama sayfanın sol üst köşesine göre. Canvas ise sayfanın köşesinde başlamıyor. Önce canvas'ın başladığı yeri çıkarırız, sonra noktanın hangi kutuya düştüğünü buluruz.
```js
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const index = Math.floor(y / CELL) * 3 + Math.floor(x / CELL)
play(index)
```canvas.getBoundingClientRect() → canvas'ın sayfadaki kutusu: nerede başladığı (left soldan, top yukarıdan)
ve ne kadar büyük olduğu. Adı uzun ama anlamı basit: "canvas'ın ekrandaki dikdörtgeni".event.clientX → tıklamanın sayfadaki x'i. - rect.left → canvas'ın başladığı yeri çıkar: artık x canvas'ın
içindeki konum (0–300).const y = ... → aynısı dikeyde.Math.floor(x / CELL) → sütun: 250 / 100 = 2.5 → 2. Math.floor(y / CELL) → satır.satır * 3 + sütun → kutu numarası. Örneğin 2. satır, 0. sütun: 2 × 3 + 0 = 6 (sol alt).play(index) → artık hep 4'e değil, tıklanan kutuya oyna.play(4) satırını sil.play(index) satırını yaz. draw() altta kalsın.Beceriler: Klavye ve fare girdisi
← Tıklamayı dinle Her ekran boyunda tıklama →