Atölye › Klondike Solitaire › 1/40. adım
Yığınlardan kurulan klasik kart oyunu. Tek nesnede on üç yığın, üst üste binen sütunlar, saf fonksiyon olarak kurallar, dokunarak taşıma, tutma noktası korunan sürükle-bırak, her hamleden sonra kazanma kontrolü ve anlık görüntü yığınıyla geri alma.
Her kâğıt oyununun bir masası olur. Bu adımda sayfadaki canvas'ı bulacağız, çizim kalemini alacağız ve canvas'ın tamamını yeşile boyayan bir döngü başlatacağız.
Döngü şimdilik hep aynı yeşil resmi çiziyor; ama kartlar gelince her karede masanın son hâlini gösterecek.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#166534'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```document.getElementById('game') → sayfadaki game kimlikli canvas'ı (480×560 piksel) bulur.canvas.getContext('2d') → canvas'ın 2D çizim kalemini verir. Adı ctx; bütün çizimler ctx. ile başlar.draw → masayı çizen fonksiyon:ctx.fillStyle = '#166534' → dolgu rengi koyu yeşil.ctx.fillRect(0, 0, canvas.width, canvas.height) → sol üst köşeden (0, 0) başlayıp canvas'ın tamamını
kaplayan dolu bir dikdörtgen. Canvas'ta x sağa, y aşağı doğru büyür.loop → döngünün bir turu: çiz, sonra requestAnimationFrame(loop) ile "ekran bir sonraki yenilenmeden önce
beni yine çağır" de. Böylece saniyede ~60 kez çalışır.requestAnimationFrame(loop) → döngüyü başlatır.Kodu editördeki üç yorum satırının (// ile başlayanlar) altına yaz ve Çalıştır'a bas. Sağdaki alan
koyu yeşil olmalı.
Beceriler: Canvas üzerine çizim, Oyun döngüsü