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

İlk tuş

Ne yapıyoruz

Dört tuş tahtayı paylaşacak: sol üst, sağ üst, sol alt, sağ alt. En üstte yazılar (tur, mesaj) için 40 piksellik bir şerit boş kalacak.

Her tuş bir çeyreğin içine oturan bir kare. Kenarlardan 6 piksel içeride başlar ki tuşların arasında ince bir boşluk kalsın. Bu adımda ilk tuşu, yeşili, sönük (koyu) rengiyle çiziyoruz.

```js
const TOP = 40 // room for the score
const HALF = canvas.width / 2

ctx.fillStyle = '#14532d'
ctx.fillRect(6, TOP + 6, HALF - 12, HALF - 12)
```

Ne işe yarıyor

const TOP = 40 → üstteki yazı şeridinin boyu. Sonundaki // bir yorum.
const HALF = canvas.width / 2 → / bölme: 400 / 2 = 200. Tahtanın yarısı, yani bir çeyreğin eni.
ctx.fillStyle = '#14532d' → koyu yeşil: yeşil tuşun sönük hâli.
ctx.fillRect(6, TOP + 6, HALF - 12, HALF - 12) →
- 6 → soldan 6 piksel içeride,
- TOP + 6 → şeridin 6 piksel altında (46),
- HALF - 12 → en ve boy: 200 − 12 = 188. Her iki yandan 6 piksel pay kalır.

Sıra sende

const ctx = ... satırının altına bir boş satır bırakıp TOP ve HALF satırlarını yaz.
Dosyanın en sonuna, bir boş satırdan sonra iki yeşil satırı yaz.
Çalıştır: sol üstte koyu yeşil bir kare görmelisin.

Beceriler: Canvas üzerine çizim

← Koyu bir tahta Her tuşa iki renk →

İlk tuş

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar