Atölye › Sokoban › 7/29. adım
Duvarları görelim. Her kare 48×48 piksel olacak: TILE. Duvarlar, kutular, hedefler, oyuncu... hepsi bir karenin
içinde çizilecek; bu yüzden kare boyayan küçük bir yardımcı yazıyoruz: tile.
Yardımcı bir de inset (içeri çekme) alır: kareyi her yandan o kadar piksel küçültür. Duvar neredeyse tam kare olacak, hedef ise ortada küçük bir nokta.
```js
const TILE = 48
function draw() {
ctx.fillStyle = '#1c1917'
ctx.fillRect(0, 0, canvas.width, canvas.height)
const tile = (x, y, color, inset = 0) => {
ctx.fillStyle = color
ctx.fillRect(x * TILE + inset, y * TILE + inset, TILE - inset * 2, TILE - inset * 2)
}
for (const k of walls) {
const [x, y] = k.split(',').map(Number)
tile(x, y, '#78716c', 1)
}
}
```const TILE = 48 → bir karenin kenarı, piksel olarak.const tile = (x, y, color, inset = 0) => { ... } → dört parametreli bir ok fonksiyonu. inset = 0 → bu değer
verilmezse 0 kullan (varsayılan değer).x * TILE + inset → x. sütun soldan x * 48 pikselde başlar; inset kadar içeri kayar. y için aynısı.TILE - inset * 2 → iki yandan da inset kadar küçüldüğü için genişlik 48 - 2 × inset.for (const k of walls) → "kümedeki her eleman için": k sırayla '0,0', '1,0'...k.split(',') → yazıyı virgülden böler: '3,2' → ['3', '2']. .map(Number) → her parçayı sayıya
çevirir: [3, 2].const [x, y] = ... → listenin ilk elemanına x, ikincisine y adını verir.tile(x, y, '#78716c', 1) → gri, 1 piksel içeri çekilmiş duvar. Aralarında ince bir çizgi görünür.// The classic ... yorumunun üstüne const TILE = 48 yaz (ctx satırından sonraki boş satırın altına).draw içinde ctx.fillRect(...) satırının altına bir boş satır bırak; tile yardımcısını ve for döngüsünü
yaz (aralarında bir boş satır).Beceriler: Canvas üzerine çizim
← Duvarları oku Bölümü ortala →