Atölye › Renk Hafızası (Simon) › 1/27. adım
Tuşların yanışını izle ve diziyi tekrarla; her turda bir renk daha. Bir gösteriyi yöneten sayaçlar, bilgisayar ile oyuncu arasında sıralar, cevapları adım adım kontrol etmek ve hızlanan bir oyun.
Bir renk hafızası oyunu (Simon) yazacağız: dört renkli tuş sırayla yanar, sen de aynı sırayla basarsın. Her turda dizi bir renk uzar.
Oyundaki her şey sayfadaki bir canvas (tuval) üzerine çizilir: 400 piksel eninde, 440 piksel boyunda boş bir dikdörtgen. Resim yapmadan önce iki şey lazım: kâğıt ve kalem. Bu adımda ikisini de alıyoruz; ekranda henüz bir şey değişmeyecek.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```document → sayfanın kendisi. Sayfadaki her şeye buradan ulaşırız..getElementById('game') → "kimliği (id) game olan öğeyi bul". Nokta (.) "bunun içindeki şu komut" demek;
parantez ( ) komuta bilgi verir. Tırnak içindeki 'game' bir yazıdır (metin).const canvas = → bulunan şeye canvas adını verir. Kutuya etiket yapıştırmak gibi: bundan sonra hep bu adla
çağırırız. const "bu ad hep aynı şeyi gösterecek" demek; = "sağdakini soldaki ada ver".canvas.getContext('2d') → canvas'tan 2 boyutlu çizim kalemini ister.const ctx = → kaleme ctx adını verir (context, yani bağlam kelimesinin kısaltması). Bütün çizim satırları
ctx. ile başlayacak: "kalemle şunu yap".Kodu, editördeki üç yorum satırının (// ile başlayanlar; bilgisayar onları okumaz, insanlar için not) altına
yaz. Kopyalama; kendin yaz, harf harf. Sonra Çalıştır'a bas (ya da Ctrl + Enter). Ekran değişmez, ama alttaki
kontroller yeşil olmalı.
Beceriler: Canvas üzerine çizim