Atölye › Satranç › 16/48. adım
Şimdi hedefleri gösterelim: gidilebilecek her karenin ortasına küçük, yarı saydam koyu bir nokta. Noktalar tahtanın ve taşların üstünde görünsün diye onları en son, iki döngü bittikten sonra çizeceğiz.
```js
// A dot on every square the selected piece can move to.
ctx.fillStyle = 'rgba(15, 23, 42, 0.4)'
for (const m of targets) {
ctx.beginPath()
ctx.arc(LEFT + m.to[1] * SQ + SQ / 2, TOP + m.to[0] * SQ + SQ / 2, 9, 0, Math.PI * 2)
ctx.fill()
}
```for (const m of targets) { → her hedef hamle için.LEFT + m.to[1] * SQ + SQ / 2 → hedef sütunun (m.to[1]) karesinin ortası; kareleri çizerken kullandığımız
formülün aynısı, artı yarım kare. İkincisi aynı hesabı satır (m.to[0]) için yapar.ctx.beginPath() → yeni bir şekle başla.ctx.arc(x, y, 9, 0, Math.PI * 2) → merkezi (x, y), yarıçapı 9 piksel olan bir yay. Açılar radyanla verilir:
0'dan Math.PI * 2'ye (360°) kadar, yani tam daire.ctx.fill() → daireyi seçili renkle doldurur.draw içinde iki for döngüsünün kapanan }'lerinin altına, draw'un son }'inden önce yorumu ve
nokta satırlarını yaz.Beceriler: Canvas üzerine çizim
← Nereye gidebilir? Hamleyi oyna →