Atölye › Dört Bağla › 1/38. adım
Diskleri sütunlara bırak ve bilgisayardan önce dördünü yan yana getir. Yerçekimli iki boyutlu bir dizi, düşme animasyonu, dört yönde çizgi kontrolü ve kazanan, engelleyen, bir hamle ileriyi düşünen bir bilgisayar rakip.
Dört Bağla (Connect Four) yapacağız: diskleri sütunlara bırakıp bilgisayardan önce dördünü yan yana getirmeye çalışacaksın.
Oyundaki her şey sayfadaki bir canvas'a (tuvale) boyanır: 448 piksel eninde, 520 piksel boyunda boş bir resim alanı. İlk iş: tuvali bul, fırçayı al ve arka planı koyu laciverte boya.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document → sayfanın kendisi. .getElementById('game') → "kimliği (id) game olan öğeyi bul". Nokta (.)
"bunun içindeki şu komut" demektir. Tırnak içindeki 'game' bir yazıdır.const canvas = → bulunan şeye ad verir. Kutuya etiket yapıştırmak gibi: bundan sonra "canvas" deyince o tuvali
kastediyoruz. const "bu ad hep aynı şeyi gösterecek" demek.canvas.getContext('2d') → tuvalin 2B çizim aracını verir; fırça gibi. Adı ctx.ctx.fillStyle = '#0f172a' → fırçaya renk sürer. Renkler # ile başlayan kodlarla yazılır; verileni aynen yaz.ctx.fillRect(x, y, en, boy) → o renkle dikdörtgen boyar. Tuvalin sol üst köşesi (0, 0)'dır; x sağa, y
aşağı doğru büyür. canvas.width ve canvas.height tuvalin eni (448) ve boyu (520): bütün tuval boyanır.Kodu editördeki üç yorum satırının (// ile başlayanlar; bilgisayar onları atlar, sadece insanlar için not) altına
yaz. Kopyalama; kendin yaz. Çalıştır'a bas: sağdaki oyun alanı koyu lacivert olmalı ve alttaki kontrol yeşile
dönmeli.
Beceriler: Canvas üzerine çizim