Atölye › Satranç › 12/48. adım
Taşı oynatmak için önce onu almamız lazım: oyuncu bir kareye tıklayacak. Tarayıcı bize tıklamanın ekrandaki
yerini verir; biz ise "hangi sıra, hangi sütun?" diye soruyoruz. Bu adımda bu çeviriyi yapacağız ve tıklanan kareyi
selected (seçili) değişkeninde tutacağız.
Henüz ekranda bir şey görünmeyecek; seçili kareyi bir sonraki adımda boyayacağız.
```js
let selected // the square of the piece you picked up, or null
selected = null
function clickSquare(r, c) {
selected = [r, c]
}
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width - LEFT
const y = ((event.clientY - rect.top) * canvas.height) / rect.height - TOP
const r = Math.floor(y / SQ)
const c = Math.floor(x / SQ)
if (inside(r, c)) clickSquare(r, c)
})
```let selected → seçilen karenin [satır, sütun]'u. reset içinde null yapıyoruz: "hiçbir şey" (henüz
seçim yok).canvas.addEventListener('pointerdown', (event) => { ... }) → canvas'a fare ya da parmak değdiğinde içerideki
fonksiyonu çalıştır. event tıklamanın bilgilerini taşır.canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri ve gösterilen boyu. Canvas ekranda küçültülmüş
olabilir; o yüzden:event.clientX - rect.left → tıklamanın canvas'ın solundan uzaklığı (ekran pikseli),* canvas.width / rect.width → onu canvas pikseline çevirir (küçültmeyi geri alır),- LEFT → tahtanın sol boşluğunu çıkarır. y aynısını dikey yapar.Math.floor(y / SQ) → kareye böl ve aşağı yuvarla: Math.floor(130 / 56) → 2. Böylece piksel, sıra ve
sütun numarasına döner.if (inside(r, c)) clickSquare(r, c) → tahtanın dışına (ör. üstteki mesaj alanına) tıklanırsa bir şey yapma.clickSquare → şimdilik yalnız kareyi hatırlar: selected = [r, c].let board ... satırının altına let selected ... satırını yaz.reset içinde uzun board = ... satırının altına selected = null yaz.function draw() { satırının üstüne clickSquare fonksiyonunu ve dinleyiciyi yaz; aralarında ve draw'dan
önce birer boş satır kalsın.Beceriler: Klavye ve fare girdisi
← Şah da adım atar Seçili kareyi yak →