Atölye › Candy Crush Tarzı Üçlü Eşleştirme › 1/29. adım
Aynı renkten üçünü sıraya dizmek için yan yana mücevherleri takas et. Eşleşmesiz bir başlangıç tahtası, bir Set ile sıraları bulmak, iki işaretçiyle yerçekimi, giderek daha çok puan getiren zincirlemeler, yanıp sönme ve düşüş için bir durum makinesi, her hamleyi deneyerek bulunan bir ipucu ve bir hamle bütçesi.
Oyun, 8 × 8'lik bir mücevher ızgarası: yan yana iki mücevherin yerini değiştirip aynı renkten üçünü sıraya dizersin, onlar yok olur.
İlk adımda ızgaranın nereye geleceğini hesaplıyoruz. Canvas (tuval) 400 piksel eninde, 480 piksel boyunda. Her hücre 48 piksel; 8 hücre 384 piksel eder. Izgarayı soldan sağa ortalayacağız, üstte de skor için boşluk bırakacağız. Sonra bütün sayfayı koyu mora boyuyoruz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const N = 8 // 8 by 8 gems
const SIZE = 48
const LEFT = (canvas.width - N * SIZE) / 2
const TOP = 72 // room for the score and the moves left
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document.getElementById('game') → sayfadaki canvas'ı bulur; canvas.getContext('2d') onun 2D çizim
kalemini verir. Adı ctx.const N = 8 → satır ve sütun sayısı. const SIZE = 48 → bir hücrenin eni ve boyu.const LEFT = (canvas.width - N * SIZE) / 2 → ızgaranın solunda kalacak boşluk: (400 − 8 × 48) / 2 = (400 − 384) / 2
= 8. Sağda da 8 kalır: ızgara ortada. Hesabı koda yazmak, canvas'ın enini değiştirsen bile ızgarayı ortada
tutar.const TOP = 72 → ızgara yukarıdan 72 piksel aşağıda başlar; üstteki şerit skor için.ctx.fillStyle = '#1e1b4b' → dolgu rengi. ctx.fillRect(0, 0, canvas.width, canvas.height) → sol üst köşeden
((0, 0)) başlayıp bütün canvas'ı kaplayan dikdörtgen. Canvas'ta x sağa, y aşağı doğru büyür.Beceriler: Canvas üzerine çizim