Atölye › Candy Crush Tarzı Üçlü Eşleştirme › 5/29. adım

Mücevherleri çiz

Ne yapıyoruz

Şimdi mücevherleri çiziyoruz: her kare için ortasına, kendi renginde, içi dolu bir daire. Rengi, hücredeki sayının COLORS'taki karşılığı.

```js
const gem = board[r][c]
ctx.fillStyle = COLORS[gem]
ctx.beginPath()
ctx.arc(x + SIZE / 2, y + SIZE / 2, SIZE / 2 - 6, 0, Math.PI * 2)
ctx.fill()
```

Ne işe yarıyor

const gem = board[r][c] → bu hücredeki mücevherin sayısı.
ctx.fillStyle = COLORS[gem] → sayıyı renge çevir: gem 3 ise mavi.
ctx.beginPath() → yeni bir şekle başla.
ctx.arc(x + SIZE / 2, y + SIZE / 2, SIZE / 2 - 6, 0, Math.PI * 2) → bir daire planlar:
- x + SIZE / 2, y + SIZE / 2 → merkez: karenin tam ortası (24 piksel içeride).
- SIZE / 2 - 6 → yarıçap 18: kenarlarda 6 piksel boşluk kalır.
- 0, Math.PI * 2 → açılar radyan ile; Math.PI yarım tur, Math.PI * 2 tam tur: bütün daire.
ctx.fill() → planlanan dairenin içini boya.

Sıra sende

draw içinde, iç döngüde ctx.fillRect(x, y, SIZE, SIZE) satırının altına beş satırı yaz.
Çalıştır: 64 renkli mücevher görmelisin. Birkaç kez çalıştır ve dikkatle bak.

Beceriler: Canvas üzerine çizim

← Rastgele mücevherli tahta Eşleşmesiz başla →

Mücevherleri çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar