Atölye › Renk Hafızası (Simon) › 5/27. adım
Dört tuşu tek tek yazmak yerine listeden çizeceğiz: "listedeki her tuş için şunu yap".
Her tuşun yeri numarasından hesaplanır. 2×2'lik bir ızgarada:
tuş: 0 1 sütun = i % 2
2 3 satır = Math.floor(i / 2)
```js
PADS.forEach((pad, i) => {
const x = (i % 2) * HALF
const y = TOP + Math.floor(i / 2) * HALF
ctx.fillStyle = pad.dim
ctx.fillRect(x + 6, y + 6, HALF - 12, HALF - 12)
})
```PADS.forEach(...) → "dizinin her elemanı için şunu yap". 4 tuş = 4 tur.(pad, i) => { ... } → her turda çalışan küçük bir fonksiyon. => (ok) fonksiyon yazmanın kısa yolu.
Parantezdeki adlara parametre denir: pad o tuşun nesnesi, i numarası (0, 1, 2, 3).i % 2 → % bölümden kalan: 3 % 2 = 1. Tuş 1 ve 3 sağ sütunda (1), 0 ve 2 sol sütunda (0).Math.floor(i / 2) → Math.floor aşağı yuvarlar: 3 / 2 = 1.5 → 1. Tuş 2 ve 3 alt satırda.const x = (i % 2) * HALF → sütunu piksele çevirir: 0 ya da 200.const y = TOP + Math.floor(i / 2) * HALF → şeridin altından başlayarak: 40 ya da 240.ctx.fillStyle = pad.dim → o tuşun sönük rengi.ctx.fillRect(x + 6, y + 6, HALF - 12, HALF - 12) → önceki adımdaki kare, ama artık her tuşun kendi çeyreğinde.ctx.fillStyle = '#14532d' ve ctx.fillRect(6, ...)) sil.forEach bloğunu yaz. İçindeki satırlar iki boşluk içeride; sondaki })'ye dikkat.Beceriler: Diziler ve nesneler, Döngüler
← Her tuşa iki renk Çizen bir fonksiyon →