Atölye › Mayın Tarlası › 3/26. adım
Tarlayı görelim. Her hücre 40 piksellik (CELL) gri bir kare olacak. En üstte 40 piksellik (TOP) bir şerit boş
kalacak: mayın sayacı ve saat oraya gelecek.
Çizerken hücrenin hangi satırda olduğu önemli değil; hepsini sırayla çizmek yeter. grid.flat() iç içe diziyi 81
hücrelik tek bir listeye düzleştirir.
```js
const CELL = 40
const TOP = 40 // room for the mine counter and the timer
function draw() {
ctx.fillStyle = '#1e293b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
for (const cell of grid.flat()) {
const x = cell.col * CELL
const y = TOP + cell.row * CELL
ctx.fillStyle = '#94a3b8'
ctx.fillRect(x + 1, y + 1, CELL - 2, CELL - 2)
}
}
newGame()
draw()
```ctx.fillStyle = '#1e293b' + ctx.fillRect(0, 0, canvas.width, canvas.height) → bütün tuvali koyu laciverte boyar.
Canvas'ta (0, 0) sol üst köşedir; x sağa, y aşağı büyür.grid.flat() → iç içe diziyi düzleştirir: 9 satırlık dizi → 81 hücrelik tek liste.for (const cell of grid.flat()) { ... } → for...of döngüsü: listedeki her eleman için içini bir kez çalıştırır;
her turda o anki hücrenin adı cell.x = cell.col * CELL → sütun × 40 piksel sağa. y = TOP + cell.row * CELL → üst şeridin altından, satır × 40 aşağı.ctx.fillRect(x + 1, y + 1, CELL - 2, CELL - 2) → her yandan 1 piksel içeride 38×38'lik kare: aralarda ince koyu
çizgiler kalır.draw() → tahtayı kurduktan sonra bir kez çiz.const SIZE = 9 satırının altına CELL ve TOP satırlarını yaz.newGame() satırının üstüne draw fonksiyonunu yaz; arada bir boş satır kalsın.newGame() satırının altına draw() yaz.Beceriler: Canvas üzerine çizim, Döngüler
← Tuval ve kalem Her karede çiz →