Public
Remixed
Okul öncesi (4-6 yaş) için İngilizce hayvan eşleştirme oyunu
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

🐾 Animal Sounds — İngilizce Öğrenme Oyunu

Okul öncesi çocuklar (4-6 yaş) için İngilizce hayvan öğrenme oyunu. Çocuk ekrandaki büyük renkli bir hayvana dokunur; hayvanın İngilizce adı sesli söylenir ve aynı anda ekranda büyük renkli harflerle belirir.

🎮 Nasıl Oynanır?

  1. Ekrandaki büyük bir hayvan görseline dokun.
  2. Hayvanın İngilizce adı net telaffuzla seslendirilir (ör. "Dog").
  3. Aynı anda yukarıda büyük renkli harflerle kelime görünür (ör. DOG).
  4. Her dokunuşta kısa bir parıltı ✨ animasyonu ve eğlenceli ses efekti oynar.
  5. Çocuk aynı hayvana istediği kadar tekrar dokunabilir — doğru/yanlış, kazanma/kaybetme yok. Sadece dinle ve öğren!

🐶 Hayvanlar (10)

Dog 🐶 · Cat 🐱 · Bird 🐦 · Rabbit 🐰 · Fish 🐠 · Horse 🐴 · Cow 🐮 · Sheep 🐑 · Duck 🦆 · Elephant 🐘

✨ Özellikler

  • 🔊 Gerçek seslendirme — Web Speech API ile çocuklara uygun, yavaş ve net İngilizce telaffuz.
  • 🔤 Büyük renkli kelime — her hayvanın adı kendine özgü renkli gradyanla ekranda belirir.
  • 🎵 Eğlenceli ses efekti — her dokunuşta parıltı sesi (tamamen tarayıcıda üretilir, harici dosya yok).
  • Parıltı animasyonu — dokununca yıldızlar ve kısa konfeti.
  • 👆 Dokunmatik uyumlu — büyük kartlar, tablet ve telefon için ideal.
  • 📖 Okuma gerektirmez — okula başlamamış çocuklar tek başına oynayabilir.

Not: Ses için tarayıcının açık olması gerekir. İlk dokunuşla ses izni otomatik açılır. En iyi sonuç için Chrome/Safari kullanın.

🏗️ Mimari

Rendering mermaid diagram...

📁 Dosya Yapısı

index.ts                       ← Hono backend (frontend'i servis eder)
frontend/
  index.html                   ← HTML shell (Twind + animasyonlar)
  index.tsx                    ← React giriş noktası
  components/
    App.tsx                    ← Oyun mantığı + düzen
    AnimalCard.tsx             ← Büyük dokunmatik hayvan kartı
    WordDisplay.tsx            ← Büyük renkli İngilizce kelime gösterimi
    Confetti.tsx               ← Parıltı / konfeti efekti
    animals.ts                 ← Hayvan verileri (kelime + emoji + renk)
    sound.ts                   ← Seslendirme + ses efektleri