Atölye › Sokoban › 8/29. adım
Bölüm sol üst köşeye sıkışmış. Onu tuvalin ortasına alacağız. Yöntem: bölümün enini ve boyunu ölç, tuvalden artan boşluğu ikiye böl; yarısı sola, yarısı sağa.
Üstte (bölüm numarası ve hamle sayacı için) ve altta (ipucu yazısı için) biraz yer de ayıracağız: TOP ve BOTTOM.
```js
const TOP = 48 // room for the level number and the move counter
const BOTTOM = 40 // room for the hint line
// Center the level on the canvas.
const rows = LEVELS[level].length
const cols = Math.max(...LEVELS[level].map((line) => line.length))
const ox = (canvas.width - cols * TILE) / 2
const oy = TOP + (canvas.height - TOP - BOTTOM - rows * TILE) / 2
const tile = (x, y, color, inset = 0) => {
ctx.fillStyle = color
ctx.fillRect(ox + x * TILE + inset, oy + y * TILE + inset, TILE - inset * 2, TILE - inset * 2)
}
```TOP = 48, BOTTOM = 40 → üstte ve altta yazılar için ayrılan şeritler.const rows = LEVELS[level].length → bölümün satır sayısı.LEVELS[level].map((line) => line.length) → her satırın uzunluğundan yeni bir liste: [5, 5, 5].Math.max(...liste) → ... listeyi açıp sayıları tek tek verir; Math.max en büyüğünü seçer. Satırlar farklı
uzunlukta olabileceği için en uzunu alırız: cols.const ox = (canvas.width - cols * TILE) / 2 → tuvalin eninden bölümün enini çıkar, ikiye böl: sol kenar.
(/ bölme.) İlk bölüm için (480 − 240) / 2 = 120.const oy = TOP + (canvas.height - TOP - BOTTOM - rows * TILE) / 2 → aynı hesap dikey: iki şerit arasında kalan
alanın ortası.tile içinde ox + ve oy + → her kare bu kadar kayar.const TILE = 48 satırının altına TOP ve BOTTOM satırlarını yaz.draw içinde const tile = ... satırının üstüne yorum satırını ve dört satırı yaz.tile içindeki ctx.fillRect(...)'in ilk iki sayısının başına ox + ve oy + ekle.Beceriler: Canvas üzerine çizim