Atölye › Yılan › 4/28. adım

Hücrelerle düşün

Ne yapıyoruz

Yılan piksel piksel değil, kare kare ilerler. Tahtayı 20×20 piksellik küçük karelere (hücrelere) bölüyoruz: 400 piksel ÷ 20 = her yönde 20 hücre. Bir satranç tahtası gibi.

Bu adımda hücre boyuna bir ad veriyoruz ve tahtaya tek bir yeşil kare çiziyoruz. Bu kare yılanın başı olacak.

```js
const CELL = 20

ctx.fillStyle = 'lime'
ctx.fillRect(5 * CELL, 5 * CELL, CELL, CELL)
```

Ne işe yarıyor

const CELL = 20 → hücre boyuna CELL adını verir. 20 sayısını her yere tek tek yazmak yerine bu adı kullanırız; bir gün hücreyi büyütmek istersen tek satırı değiştirmen yeter.
ctx.fillStyle = 'lime' → rengi açık yeşil yapar.
5 * CELL → * çarpma demek: 5 × 20 = 100. Yani 5. sütun soldan 100. pikselden, 5. satır yukarıdan
1. pikselden başlar. (Sayma 0'dan başlar: ilk sütun 0. sütundur.)
Sondaki CELL, CELL → karenin eni ve boyu: tam bir hücre.
Bu satırlar arka planın altına yazılır, çünkü canvas'ta sonra çizilen öncekinin üstüne gelir.

Sıra sende

const ctx = ... satırının altına bir boş satır bırakıp const CELL = 20 yaz.
Dosyanın en sonuna, bir boş satırdan sonra iki lime satırını yaz.
Çalıştır: koyu tahtada yeşil bir kare görmelisin.

Beceriler: Canvas üzerine çizim

← Tahtayı boya Yeri bir değişkende tut →

Hücrelerle düşün

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar