Tasarım aşamasında bittikten sonra paylaşılacaktır.
Gezegen Balon Patlatma Oyunu: Kod İncelemesi ve Mimari Makalesi
Bu makalede, “Gezegen Balon Patlatma” adlı HTML/CSS/JavaScript oyununun kod yapısını, animasyonlarını ve temel oyun mantığını ayrıntılarıyla inceleyeceğiz. Amacımız; kodun nasıl organize edildiğini, hangi algoritmaların kullanıldığını ve oyuncuya sunulan etkileşim mekanizmalarını adım adım açıklamak.
1. Projenin Genel Mimarisi
HTML Şablonu: Oyun alanı, başlık (puan, seviye, ilerleme çubuğu), oyun çerçevesi (.game-frame ve .game-grid), nişangah çizgisi (.aim-line), atış balonu (.shooter-bubble), güç-up ikonları ve “Oyun Bitti” ekranı gibi tüm görsel bileşenler statik HTML olarak tanımlanmıştır.
CSS Özellikleri & Animasyonlar:
:root içinde her gök cisminin resim kaynağı, eksen eğimi (--*-tilt), dönüş süresi (--*-day) ve renk tonu (--*-color) gibi özel değişkenler tanımlanmış.
@keyframes blokları balon yüzeyinin dönmesi, yüzey altındaki atmosfer gölgesinin titreşmesi, balon atışı ve patlama efektleri gibi görsel animasyonları yönetiyor.
JavaScript Sınıfı: PlanetBubbleShooter sınıfı, oyunun tüm iç mantığını (ızgara yönetimi, atış hesaplamaları, çarpışma kontrolü, seviye ilerleme, puanlama vb.) barındırır. Sayfa yüklendiğinde startGame() fonksiyonu bu sınıfın bir örneğini yaratır ve oyun başlar.
2. CSS’de Gezegen ve Balon Tasarımı
Özel Değişkenler (--mercury-image, --earth-day vs.)
Her gezegen için:
- Resim:
background-image olarak atanıyor.
- Eksen eğimi:
transform: rotate(...), gezegenin gerçek eksen eğimini simüle ediyor.
- Gün süresi: Animasyon periyodunu belirleyerek gezegenin dönüş hızını kontrol ediyor.
Animasyonlar
planetRotate: Gezegen yüzeyini sürekli döndürür. Periyot, gün süresine bağlı hesaplanıyor (calc(var(--earth-day) * .1s) gibi).
bubbleFloat, shootBubble, explosionEffect ve starBurst: Balonların hafifçe yükselip alçalması, atış yolu, patlama görseli ve parçacık efektleri için tanımlı.
Atmosfer–Yüzey Katmanları
3. HTML Yapısı ve Oyun Bileşenleri
<div class="game-container">
<div class="game-header">…</div>
<div class="game-area">
<div class="game-frame">
<div class="game-grid" id="game-grid"></div>
</div>
<div class="aim-line" id="aim-line"></div>
<div class="shooter-area">…</div>
<div class="power-ups">…</div>
</div>
<div class="game-over" id="game-over">…</div>
</div>
.game-grid: Balonların ızgarada konumlandığı container..aim-line: Fare hareketine göre nişangah hattı; rotate() ve opacity ile gösteriliyor/gizleniyor..shooter-bubble: Ekranın altından atış yapacak balon, içindeki .planet-atmosphere ve .planet-surface ile görselleştiriliyor.- Güç-up’lar: Patlatma bombasından gökkuşağı modu ve şimşek etkisine kadar ekstra oyun içi yetenekler.
4. JavaScript: Oyun Mantığı ve Algoritmalar
4.1. Izgara Oluşturma ve Başlangıç Durumu
initializeGrid():
gridHeight × gridWidth boyutunda boş bir matris oluşturur.- İlk dört satırı rastgele gezegenlerle doldurur. İkinci satırdaki fazladan hücreyi atlayarak alt alta kayma efekti sağlar.
renderGrid() ile DOM’a balonları çizer.
4.2. Balon Oluşturma ve Konumlandırma
createBubble(type, row, col):
- Balon
div elemanı yaratır, data-row, data-col, data-planet özniteliklerini atar.
- Sol ve üst pozisyonu satır/ sütuna göre hesaplar (satır kaydırma için
offsetX = bubbleSize/2).
4.3. Nişan Alma ve Atış
4.4. Animasyon Döngüsü ve Çarpışma Kontrolü
animateShot():
- Her karede
currentX += unitX * speed, currentY += unitY * speed yapar.
- Duvara çarpmada yatay vektörü ters çevirir.
- Yukarı sınır veya mevcut balonlara yakınlık algılanırsa
attachBubble() çağrılır.
checkCollision(x, y):
4.5. Balonu Izgaraya Eklemek ve Eşleştirme
attachBubble():
- Hedef hücreyi (row, col) belirleyip
grid[row][col] = currentPlanet.
- Eşleşme Bulma:
findMatches(row, col) ile derinlik öncelikli tarama (DFS) uygulayıp, bitişik aynı tür balon kümelerini bulur.
- Patlatma: ≥3 balon varsa
explodeMatches(), ardından izole balonları (tavanla bağlantısı kesilen) dropFloatingBubbles() ile serbest bırakır.
4.6. Puanlama ve Seviye İlerlemesi
- Puan Hesabı: Patlayan her balon için temel skor (15×seviye) + düşen balon bonusu (5 puan) ekler.
- İlerleme Çubuğu:
score / (level × 1000) oranına göre doluluk ayarlanır. %100 olunca level++ ve yeni satır ekler (addNewRow()).
4.7. Oyun Bitiş Kriteri
checkGameOver():
- Alt satırda balon olup olmadığını kontrol eder.
- Tüm balonlar temizlendiyse de oyunu kazanma durumu sağlar.
endGame(): “Oyun Bitti” ekranını gösterir, son puanı ve seviyeyi günceller.
5. Sonuç ve Geliştirme Fırsatları
Bu kod yapısı, klasik balon patlatma mekaniklerini gezegen teması ve zengin CSS animasyonlarıyla birleştiriyor. Açık katmanlı mimari sayesinde:
- Yeni güç-up’lar,
- Farklı ızgara boyutları,
- Özel oyun modları (zamanlı, sınırlı atış gibi)
gibi eklentileri kolaylıkla entegre edebilirsiniz. Ayrıca, JavaScript içindeki DFS tabanlı eşleşme ve bağlı bileşen analizi, daha karmaşık “öbek temizleme” algoritmaları için de temel oluşturur.
Özetle, “Gezegen Balon Patlatma” oyunu; HTML şablonu, kapsamlı CSS değişkenleri ve animasyonları ile görsel canlılık; JavaScript sınıf yapısı ve algoritmalarıyla ise güçlü ve ölçeklenebilir bir oyun deneyimi sunuyor. İster eğitim amaçlı inceleyin, ister kendi temalarınızı ekleyerek genişletin—bu kod tabanı, web tabanlı etkileşimli oyun geliştirmeyi öğrenmek için ideal bir örnektir.
