Kodlarla yıldızları birleştirsem nasıl olurdu?

İşte bu soruyla başlayan maceram “Liru Galaxy”'ye dönüştü 🌌

(Liru Galaxy ilk versiyonuyla yeni fırlatıldı. Güncellemeler yolda.)

Liru Galaxy'i keşfetmek için Liru Galaxy'e tıklayabilirsin!

Bu proje benim için bir oyun değil sadece.

• 🧠 Hayal gücümün dijitale dönüşmüş hali,
• 🎨 Renkli bir karakter,
• 🏆 Biraz da başarı ve motivasyon sistemi.

Astronot Liru ile birlikte farklı galaksilere adım atıyoruz.

Sana özel bir karakter oluşturabilir, yıldız toplayabilir ve başarılar kazanabilirsin.

Üstelik tüm bu yolculuk;

HTML + CSS + JavaScript ile tamamen benim tarafımdan kodlandı. 💻

🔧 Projeyi teknik olarak nasıl geliştirdim?

🧱 1. Proje Yapısı

Projeyi statik bir web uygulaması olarak hazırladım:

• index.html -> Ana sayfa ve tüm bileşenlerin HTML yapısı
• style.css -> Tüm görsel tasarım ve animasyonların CSS dosyası
• script.js -> Tüm etkileşim, animasyon ve mantıksal işlemler

Bu yapıyı, ileri düzey bir front-end framework kullanmadan, sadece temel web teknolojileri ile hazırladım.

🎨 2. HTML ile Sayfa ve Komponent Yapısı

Sayfa içeriği section yapısıyla bölümlere ayrıldı (örneğin: home, story, customize, achievements).

Her bölümde özel UI bileşenleri bulunuyor:

• Butonlar
• Karakter kartı
• Başarı kutuları
• Hikaye adımları

💅 3. CSS ile Tasarım ve Animasyonlar

• CSS değişkenleri tanımladım (renk paleti, gölgeler, temalar).
• @media query ile responsive (mobil/tablet/masaüstü) uyumluluğunu sağladım.
• @keyframes ile animasyonları manuel kodladım:
  • Yıldız parıltısı (twinkle)
  • Karakterin yürüme/zıplama hareketleri
  • Kapı açılma efekti
  • Konfeti düşüşü
• Kullanıdığım fontlar: Orbitron (başlık), Space Grotesk (içerik).

🧠 4. JavaScript ile Mantık ve Etkileşim

👤 Karakter Özelleştirme:

• Butonlarla saç/göz/kıyafet seçimi data-* attributeleri üzerinden yapılır.
• Seçimler localStorage ile kaydedilir, her yüklemede uygulanır.
• Renk geçişleri background: linear-gradient(...) ile sağlanır.

🚀 Galaksi Yolculuğu Animasyonu:

1. “Başla” butonuna tıklanınca karakter koşmaya başlar. ( .running)
2. Kapı animasyonu başlar. ( .opening)
3. Karakter küçülerek geçer.
4. Konfeti + Modal açılır → setTimeout + classList ile sıralı tetiklenir.

🏆 Başarı Sistemi:

• localStorage ile istatistikler tutulur: totalJourneys, starsCollected, planetsVisited
• Belirli eşiklere ulaşıldığında başarılar açılır (örneğin 100 yıldız = “Star Collector”).
• HTML'deki kart bileşenleri üzerinden class="earned" ile görsel gösterim sağlanır.

📢 Sosyal Paylaşım:

• LinkedIn için dinamik URL ile window.open(),
• “Link Kopyala” için clipboard API kullandım.

🪐 Yıldız Efekti:

• Rastgele renk, boyut ve animasyon değerleriyle yıldızlar ürettim.
• Math.random() kullanılarak top/left/size gibi parametreler belirledim.

📱 Cihaz Tipi Algılama:

• getDeviceType() fonksiyonu ile cihaz mobil/tablet/desktop olarak sınıflandırdım.
• Yıldız sayısını, animasyon süresini, konfeti miktarını bu tipe göre optimize ettim.

🧪 Hata Yakalama & Performans İzleme:

• window.addEventListener('error') ile JS hataları dinleniyor.
• performance.timing ile sayfa yüklenme süreleri ölçülüyor.

🧠 5. Sonuç:

Liru Galaxy, sadece bir oyun değil;

• Kodlama becerilerimi,
• Kullanıcı deneyimi tasarımını,
• Ve hayal gücümü birleştirdiğim bir vitrin projesidir :)