Atölye › 2048 › 1/26. adım
Numaralı karoları kaydır, eşit olanları birleştirip 2048'e ulaş. 2 boyutlu ızgara, dört yönde yeniden kullanılan saf bir kaydır-birleştir fonksiyonu ve kaydırma girdisi.
2048'i yapıyoruz: 4×4'lük bir tahtada numaralı karoları kaydırırsın, iki eşit karo çarpışınca birleşip iki katına çıkar (2 + 2 → 4, 4 + 4 → 8...). Hedef 2048 karosunu yapmak.
İlk adımda ölçüleri koyup boş tahtayı çiziyoruz: krem renkli bir sayfa, üstte skor için bir şerit, altında kare, kahverengi bir tahta.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const SIZE = 4
const GAP = 12
const CELL = (canvas.width - GAP * (SIZE + 1)) / SIZE // 85
const TOP = 60 // room for the score above the board
function draw() {
ctx.fillStyle = '#faf8ef'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#bbada0'
ctx.fillRect(0, TOP, canvas.width, canvas.width)
}
draw()
```document.getElementById('game') → sayfadaki canvas'ı bulur. canvas.getContext('2d') → onun 2D çizim
bağlamını (kalemini) verir; bütün çizim ctx. ile yapılır.SIZE = 4 → tahtanın bir kenarındaki hücre sayısı. GAP = 12 → hücreler arası boşluk.CELL = (canvas.width - GAP * (SIZE + 1)) / SIZE → bir hücrenin boyu. 400 piksellik genişlikte 5 boşluk (iki
kenar ve üç ara) ve 4 hücre var: (400 − 12 × 5) / 4 = 85. Sayıyı elle yazmak yerine hesaplatıyoruz; SIZE
değişirse hücre boyu kendiliğinden uyar.TOP = 60 → tahtanın üstünde skor için bırakılan şerit.ctx.fillStyle = ... rengi seçer, ctx.fillRect(x, y, en, boy) dikdörtgeni boyar. (0, 0) sol üst köşedir;
y aşağı doğru büyür.y = TOP'tan başlayan, canvas'ın eni kadar (400×400) kare
tahta.draw() → çizimi yapan fonksiyonu çağırır. Bu oyunda sürekli dönen bir döngü olmayacak; ekran yalnız bir şey
değişince yeniden çizilecek.Kodu editördeki üç yorum satırının altına yaz ve Çalıştır'a bas. Krem bir sayfa ve üstte boş bir şeridin altında kahverengi, kare bir tahta görmelisin.
Beceriler: Canvas üzerine çizim