Atölye › Tetris Tarzı Bloklar › 6/32. adım

Parça küçük bir ızgaradır

Ne yapıyoruz

Her parça kendi başına minik bir tablodur, yani bir matris: sayılardan oluşan satırlar. 0 boş, 0 olmayan sayı dolu hücre. T parçası:

0 3 0
3 3 3
0 0 0

Satırları alt alta yazınca şekli gözünle görürsün: üstte ortada bir blok, altında üç blok. 3 aynı zamanda rengi: mor.

Düşen parça = şekil + kuyudaki yeri: x sütun, y satır (matrisin sol üst köşesinin yeri). Bir nesnede tutuyoruz ve drawShape ile çiziyoruz.

```js
let piece = { shape: [[0, 3, 0], [3, 3, 3], [0, 0, 0]], x: 3, y: 0 }

function drawShape(shape, x, y) {
  shape.forEach((cells, r) => {
    cells.forEach((value, c) => {
      if (value) drawCell(x + c, y + r, COLORS[value])
    })
  })
}

  drawShape(piece.shape, piece.x, piece.y)
```

Ne işe yarıyor

Sıra sende

  1. let board = ... satırının altına let piece = ... satırını yaz.
  2. drawCell fonksiyonunun altına bir boş satır bırakıp drawShape fonksiyonunu yaz.
  3. draw içinde iki döngünün kapanan } satırlarının altına drawShape(piece.shape, piece.x, piece.y) yaz.
  4. Çalıştır: kuyunun tepesinde mor bir T görmelisin.

Beceriler: Diziler ve nesneler, Canvas üzerine çizim

Tüm adımlar

  1. Kuyu
  2. Sayı satırlarından tahta
  3. Bir hücre çiz
  4. Bütün tahtayı çiz
  5. Sayı renktir
  6. Parça küçük bir ızgaradır
  7. Şekil listesi
  8. Yedi parçanın hepsi
  9. Kuyunun içine sığıyor mu?
  10. Bloklar yolu kapatır
  11. Önce dene, sonra taşı
  12. Oklarla oynat
  13. Matrisi döndür
  14. Yukarı okla döndür
  15. Duvar itmesi
  16. Kendiliğinden düşüş
  17. Tepede rastgele bir parça
  18. Yere otur ve kilitlen
  19. Oyunu başlatan tek fonksiyon
  20. Yığın tepeye ulaşınca
  21. Ekranda Game Over
  22. Yeniden oyna
  23. Dolu satırları sil
  24. Satırlara puan
  25. Yan panel
  26. Seviyeler
  27. Her seviyede daha hızlı
  28. Adil bir parça torbası
  29. Sıradaki parça
  30. Bırak gitsin
  31. Hayalet parça
  32. Kendin yap: parçayı beklet