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

Hayalet parça

Ne yapıyoruz

Son dokunuş: kuyunun dibinde, parçanın nereye düşeceğini gösteren soluk bir hayalet. Oyuncu Boşluk'a basmadan önce sonucu görür.

Hayalet için sert bırakmadaki fikri kullanıyoruz ama hiçbir şeyi taşımadan: parçanın satırından başla, bir alt satıra sığdıkça bir aşağı in. Sonra parçayı o satırda yarı saydam beyazla çiz.

```js
function ghostY() {
  let y = piece.y
  while (fits(piece.shape, piece.x, y + 1)) y++
  return y
}

function drawShape(shape, x, y, color) {
      if (value) drawCell(x + c, y + r, color || COLORS[value])

    drawShape(piece.shape, piece.x, ghostY(), 'rgba(255, 255, 255, 0.15)')
```

Ne işe yarıyor

• let y = piece.y → gerçek piece.y'ye dokunmayız; kendi y kopyamızı artırırız.
• while (fits(piece.shape, piece.x, y + 1)) y++ → bir alt satıra sığdıkça bir aşağı in (y++ 1 artır). Sonuç parçanın inebileceği en alt satır.
• function drawShape(shape, x, y, color) { → dördüncü, isteğe bağlı bir parametre: color.
• color || COLORS[value] → || burada "yoksa" gibi çalışır: color verildiyse onu, verilmediyse (boşsa) sayının kendi rengini kullan. Eski çağrılar dördüncü değeri vermediği için eskisi gibi çalışır.
• 'rgba(255, 255, 255, 0.15)' → beyaz, yalnız %15 görünür.
• Hayalet gerçek parçadan önce çizilir; sonra çizilen üstte olduğu için gerçek parça hep önde kalır.
• fits tek bir soruyu açıkça cevaplayan küçük bir fonksiyondu; hareket, döndürme, düşme, kilitleme, oyun sonu, sert bırakma ve hayaletin hepsi ondan çıktı.

Sıra sende

1. hardDrop fonksiyonunun altına bir boş satır bırakıp ghostY fonksiyonunu yaz.
2. function drawShape(shape, x, y) { satırına , color ekle; içinde COLORS[value] yerine color || COLORS[value] yaz.
3. draw içinde if (state === 'playing') { bloğunda, gerçek parçayı çizen satırın üstüne hayalet satırını yaz.
4. Çalıştır: dipte soluk bir hayalet görmelisin. Tebrikler, oyun tamam!

Beceriler: Canvas üzerine çizim, Döngüler

← Bırak gitsin Kendin yap: parçayı beklet →

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