Atölye › Renk Hafızası (Simon) › 6/27. adım

Çizen bir fonksiyon

Ne yapıyoruz

Tuşlar yanıp sönecek; yani tahtanın tekrar tekrar çizilmesi gerekecek. Her seferinde bu satırları yazamayız. Bu yüzden çizim satırlarını bir fonksiyonun içine koyup ona draw (çiz) adını veriyoruz.

Fonksiyon bir yemek tarifi gibidir: tarifi bir kez yazarsın, istediğin kadar pişirirsin. Ekran yine aynı görünecek.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  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)
  })
}

draw()
```

Ne işe yarıyor

• function draw() { → fonksiyon tanımlar: "draw deyince şunları yap". Bu satır tek başına bir şey çizmez, sadece tarifi yazar.
• { ile } arasındaki satırlar fonksiyonun gövdesi. İki boşluk içeriden yazılır; forEach'in içi dört boşluk içeride kalır.
• Gövdenin ilk iki satırı arka planı boyar: bu, eski resmi siler.
• draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

1. Arka planı boyayan ctx.fillStyle = '#0f172a' satırının üstüne function draw() { yaz.
2. Altındaki bütün çizim satırlarını iki boşluk içeri al (satırları seçip Tab'a basmak da olur).
3. En alta kapanan } yaz.
4. Bir boş satırdan sonra draw() yaz. Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Dört tuşun hepsi Bir tuşu yak →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Koyu bir tahta
3. İlk tuş
4. Her tuşa iki renk
5. Dört tuşun hepsi
6. Çizen bir fonksiyon
7. Bir tuşu yak
8. Durmadan çiz
9. Hatırlanacak dizi
10. Turu göster
11. Bir tuşu bir süre yak
12. Yeniden sön
13. Bilgisayar bir tuş gösterir
14. Bütün diziyi göster
15. İzle, sonra sıra sende
16. Her basışı kontrol et
17. Klavyeyle oyna
18. Bir noktada hangi tuş var?
19. Fareyle oyna
20. İlerleme ve hata
21. Yeni oyun fonksiyonu
22. Yeniden denemek için tıkla
23. Basınca yan
24. Gittikçe hızlan
25. Rekoru kaydet
26. Rekoru göster
27. Kendin yap: oyalanmak yok