Atölye › Tetris Tarzı Bloklar › 1/32. adım
Düşen parçalar, döndürme ve satır silme. Matris olarak parçalar, matris döndürme, ızgaraya karşı çarpışma, kilitleme, satır silme, seviyeler ve adil bir rastgele torba.
Düşen blok oyununda (Tetris benzeri) parçalar bir kuyuya düşer: 10 hücre eninde, 20 hücre boyunda. Her hücre 24 piksel. Bu adımda sayfayı koyu renge, kuyuyu biraz daha açık renge boyayacağız. Sağda kalan boşluk ileride skor ve sıradaki parça için.
Oyunu sayfadaki canvas (tuval) üstüne çiziyoruz: 360 piksel eninde, 480 piksel boyunda. Önce onu ve çizim kalemini alıyoruz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const COLS = 10
const ROWS = 20
const CELL = 24
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#1e293b'
ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)
```document.getElementById('game') → sayfada kimliği game olan canvas'ı bulur; canvas.getContext('2d') onun
2D çizim kalemini verir. Adı ctx; her çizim satırı ctx. ile başlar.const COLS = 10, ROWS = 20, CELL = 24 → kuyunun ölçüleri: 10 sütun, 20 satır, her hücre 24 piksel. Sayıları
bir kez adlandırıp her yerde bu adları kullanacağız.ctx.fillStyle = '#0f172a' → dolgu rengi (çok koyu lacivert). ctx.fillRect(x, y, en, boy) → o renkle içi dolu
bir dikdörtgen.(0, 0) sol üst köşedir; x sağa, y aşağı doğru büyür.canvas.width × canvas.height).COLS * CELL = 10 × 24 = 240 piksel eninde, ROWS * CELL = 20 × 24 = 480 piksel
boyunda. * çarpma demek. Canvas 360 olduğu için sağda 120 piksellik bir yan panel kalır.Beceriler: Canvas üzerine çizim