🎯 JavaScript Sayı Tahmin Oyunu

“Bilgisayar bir sayı tutar… sen de mantığını.” 😅

Bu projede:

• JavaScript nasıl düşündüğünü
• Kullanıcıyla nasıl konuştuğunu
• Hataları nasıl yönettiğini

adım adım öğreneceğiz.

Ve evet… bol mizah, bol ipucu, bol ‘aha!’ anı var 😄

🧠 Bu Projede Neler Öğreneceksin? (Gerçek Kazanımlar)

✔️ Rastgele sayı üretme (gerçekten doğru şekilde)
✔️ Kullanıcıdan güvenli veri alma
✔️ Oyun mantığı (state management mini versiyon)
✔️ DOM ile ekrana canlı bilgi yazdırma
✔️ Event’lerle kullanıcıyı dinleme
✔️ “Bunu React’te de kullanırım” kafası

📦 Oyunun Genel Mantığı (JS’in Kafasıyla)

Önce oyunun beynini kuralım:

1️⃣ Bilgisayar 1–100 arası rastgele bir sayı tutar
2️⃣ Kullanıcının belirli sayıda hakkı vardır
3️⃣ Her tahminde:

• Doğruysa → 🎉 kazanır
• Yanlışsa → ipucu alır
  4️⃣ Haklar biterse → 😵 oyun biter

📌 Altın kural:

Kod yazmadan önce mantığı kur.
JS sihirbaz değil, sen düşünmezsen o da düşünmez 😄

🎲 1. Rastgele Sayı Üretme (Oyunun Kalbi ❤️)

const randomNumber = Math.floor(Math.random() * 100) + 1;

🧠 Burada Neler Oluyor? (Parça Parça)

Math.random()

👉 0 ile 1 arasında rastgele ondalıklı sayı üretir
Örnek: 0.374829

Math.random() * 100

👉 0 – 99.999 arası bir sayı olur

Math.floor(...)

👉 Ondalığı atar
56.87 → 56

+ 1

👉 Aralığı 1–100 yapar (çok önemli!)

📌 İpucu:
Math.floor(Math.random() * max) + min
bu kalıp her projede işine yarar

❤️ 2. Hak Sayısı (Oyuncunun Canı)

let attemptsLeft = 5;

🧠 Bu değişken:

• Oyunun state’i
• Her yanlışta azalır
• 0 olunca oyun biter

“Hak yoksa umut da yoktur.” 😅

📌 Pratik ipucu:
Bu sayı ileride:

• zorluk seviyesi
• kullanıcı ayarı
  için kullanılabilir

🖥️ 3. HTML Tarafı (Sahne Kuruluyor 🎭)

Minimal ama işlevsel bir HTML:

<input type="number" id="guessInput" placeholder="1-100 arası bir sayı gir" />
<button id="guessBtn">Tahmin Et</button>

<p id="message"></p>
<p id="attempts"></p>

🧠 Burada:

• input → kullanıcıyla konuşur
• button → oyunu tetikler
• p → geri bildirim verir

🔗 4. DOM Elemanlarını JS’e Bağlama

const guessInput = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const message = document.getElementById("message");
const attempts = document.getElementById("attempts");

attempts.textContent = `Kalan hak: ${attemptsLeft}`;

🧠 Mantık

• HTML → JS’e bağlanır
• JS → HTML’i kontrol eder
• Kullanıcı → sadece izler 😄

📌 Pro İpucu:
DOM elementlerini en başta al, dağınık koddan kurtul

🎮 5. Oyun Başlıyor! (Event Listener)

guessBtn.addEventListener("click", () => {
  const userGuess = Number(guessInput.value);

🧠 Burada:

• Butona tıklanıyor
• Input’taki değer alınıyor
• Number() ile string → number yapılıyor

📌 Neden önemli?
"10" === 10 ❌
Number("10") === 10 ✅

🚧 6. Geçersiz Giriş Kontrolü (Kullanıcıyı Kurtar)

if (!userGuess) {
  message.textContent = "⚠️ Lütfen geçerli bir sayı gir!";
  return;
}

🧠 Bu neyi engeller?

• Boş input
• 0
• NaN

📌 Gerçek hayat dersi:
Kullanıcıya asla güvenme 😄
Ama nazik ol.

🎯 7. Doğru Tahmin Kontrolü (Zafer Anı 🎉)

if (userGuess === randomNumber) {
  message.textContent = "🎉 Tebrikler! Doğru tahmin!";
  guessBtn.disabled = true;
}

🧠 Burada:

• Oyun kazanılır
• Buton kilitlenir
• Kullanıcı mutlu olur 😊

📌 UX ipucu:
Kazanılan oyunda input’u kapatmak iyi bir deneyimdir

🔽 8. Yanlış Tahmin ve Hak Yönetimi

else {
  attemptsLeft--;

😬 Yanlış yaptık…

• Hak azalır
• Oyunun tansiyonu yükselir

😵 9. Haklar Bitti mi? (Game Over)

if (attemptsLeft === 0) {
  message.textContent = `😵 Oyun bitti! Sayı: ${randomNumber}`;
  guessBtn.disabled = true;
}

🧠 Burada:

• Oyun sonlanır
• Doğru sayı açıklanır
• Kullanıcı “ah be” der 😅

🔼🔽 10. Daha Büyük / Daha Küçük İpucu

message.textContent =
  userGuess < randomNumber
    ? "🔼 Daha büyük bir sayı dene"
    : "🔽 Daha küçük bir sayı dene";

attempts.textContent = `Kalan hak: ${attemptsLeft}`;

🧠 Ternary operator ile:

• Daha temiz kod
• Daha az if
• Daha okunabilir yapı

📌 Pro ipucu:
Bu yapı interview’da artı puan kazandırır 😉

🧹 11. Input Temizleme (Minik Ama Önemli)

guessInput.value = "";

🎯 Kullanıcı bir sonraki tahmine hazır!

🧪 12. Bu Proje Sana Gerçekte Ne Öğretir?

✔️ JS düşünce yapısı
✔️ Oyun & uygulama mantığı
✔️ DOM + state + event ilişkisi
✔️ “Bunu framework’e taşıyabilirim” bilinci

🚀 13. Level Up Fikirleri (Ustalık Yolu)

Projeyi şuralara taşıyabilirsin:

• 🔁 Restart butonu
• 🎚️ Zorluk seviyesi
• 🧠 Tahmin geçmişi
• 🎨 Renkli feedback
• 🔊 Ses efektleri
• 📱 Mobil uyum

🎯 Son Söz

Bu oyun küçük olabilir ama şunu öğretir:

“JavaScript sadece syntax değil, düşünme biçimidir.” 😄