Atölye › Satranç › 13/48. adım

Seçili kareyi yak

Ne yapıyoruz

Oyuncu neyi seçtiğini görmeli: seçili kare yarı saydam sarı bir katmanla parlayacak.

Bunun için "bu kare, seçili kare mi?" diye sormamız gerek. Ama iki diziyi === ile karşılaştıramayız: [7, 1] === [7, 1] bile false çıkar, çünkü === iki dizinin aynı dizi olup olmadığına bakar, içlerine değil. Bu yüzden küçük bir same yardımcısı yazacağız.

```js
const same = (a, b) => a && b && a[0] === b[0] && a[1] === b[1]

      ctx.fillRect(x, y, SQ, SQ)
      if (same(selected, [r, c])) {
        ctx.fillStyle = 'rgba(250, 204, 21, 0.45)'
        ctx.fillRect(x, y, SQ, SQ)
      }
```

Ne işe yarıyor

const same = (a, b) => a && b && ... → iki kareyi karşılaştırır. Önce a && b: ikisi de var mı? (selected null olabilir; null[0] hata verirdi.) Sonra satırlar eşit ve sütunlar eşit mi?
if (same(selected, [r, c])) { → çizilen kare seçili kareyse:
'rgba(250, 204, 21, 0.45)' → kırmızı, yeşil, mavi ve saydamlık: sarı, %45 opak. Karenin kendi rengi altından görünür.
İkinci fillRect → sarı katmanı karenin üstüne boyar. Taş bundan sonra çizildiği için taşın altında kalır.

Sıra sende

function clickSquare(r, c) { satırının üstüne same satırını yaz; altında bir boş satır kalsın.
draw içinde ctx.fillRect(x, y, SQ, SQ) satırının altına, const piece = board[r][c] satırının üstüne if bloğunu yaz.
Çalıştır ve bir kareye tıkla: sararmalı. Başka bir kareye tıklayınca sarılık oraya geçmeli.

Beceriler: Canvas üzerine çizim

← Hangi kareye tıklandı? Sıra kimde? →

Seçili kareyi yak

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar