JavaScript ile Sayı Tahmin Oyunu Uygulaması

Oyuncu tarafından girilen tahminlerin doğruluk durumuna göre bir değerlendirme yapıldıktan sonra,

Tahminler değerlendirildikten sonra arka plan rengi şu şekilde değişecek:

Yeşil ➜ Doğru tahmin
Sarı ➜ Sayıya 1 sayı farkla yakın tahmin
Kırmızı ➜ Diğer yanlış tahminler

Bu uygulamada Math.random() kullanarak sayıyı rastgele seçeceğiz ve her doğru tahminden sonra sayı yenilenecek.

UYGULAMADA NELER VAR?

Bu uygulama sayesinde:

HTML form öğeleri ile kullanıcıdan giriş alma
JavaScript ile koşullu kontroller yapma
Math.random() ile rastgele sayı üretme
DOM üzerinden arka plan rengini değiştirme
gibi temel konuları pekiştireceğiz.

NASIL ÇALIŞIR?

Sayfa her yüklendiğinde iki farklı sayı 1–10 arasında rastgele belirlenir.
Kullanıcı iki tahmin girer ve “Tahmin Et” butonuna tıklar.
JavaScript tahminleri kontrol edip:
- Doğruysa → Yeşil
- 1 sayı yaklaşıksa → Sarı
- Diğer yanlış ise → Kırmızı
  şekilde arka plan rengi değiştirir.
Doğru tahmin sonrası sayı yenilenir ve oyun devam eder.

HTML YAPISI

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>İki Sayı Tahmin Oyunu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h2>1 ile 10 Arasında 2 Tahmin Yap</h2>

<div class="inputs">
    <input type="number" id="tahmin1" min="1" max="10" placeholder="1-10">
    <input type="number" id="tahmin2" min="1" max="10" placeholder="1-10">
</div>

<button id="tahminBtn">Tahmin Et</button>

<p id="sonuc"></p>

<script src="script.js"></script>
</body>
</html>

CSS KODLARI

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 100px;
    transition: background 0.5s;
}

.inputs input {
    padding: 10px;
    font-size: 16px;
    width: 50px;
    text-align: center;
    margin: 0 5px;
}

button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

p {
    margin-top: 20px;
    font-size: 22px;
}

JAVASCRİPT KODLARI

let sayi1 = Math.floor(Math.random() * 10) + 1;
let sayi2 = Math.floor(Math.random() * 10) + 1;

document.getElementById("tahminBtn").addEventListener("click", function() {
    let t1 = parseInt(document.getElementById("tahmin1").value);
    let t2 = parseInt(document.getElementById("tahmin2").value);

    if (!t1 || t1 < 1 || t1 > 10 || !t2 || t2 < 1 || t2 > 10) {
        alert("Lütfen 1 ile 10 arasında iki sayı gir!");
        return;
    }

    let mesaj = "";
    let renk = "";

    
    let fark1 = Math.abs(sayi1 - t1);
    if (t1 === sayi1) {
        mesaj += "Tahmin 1 doğru! \n";
        renk = "green";
        sayi1 = Math.floor(Math.random() * 10) + 1;
    } else if (fark1 === 1) {
        mesaj += "Tahmin 1 yaklaştın! \n";
        renk = "yellow";
    } else {
        mesaj += "Tahmin 1 yanlış \n";
        renk = "red";
    }

    let fark2 = Math.abs(sayi2 - t2);
    if (t2 === sayi2) {
        mesaj += "Tahmin 2 doğru! ";
        renk = "green";
        sayi2 = Math.floor(Math.random() * 10) + 1;
    } else if (fark2 === 1) {
        mesaj += "Tahmin 2 yaklaştın! ";
        if (renk !== "green") renk = "yellow";
    } else {
        mesaj += "Tahmin 2 yanlış ";
        if (renk !== "green" && renk !== "yellow") renk = "red";
    }

    document.getElementById("sonuc").innerText = mesaj;
    document.body.style.background = renk;

    document.getElementById("tahmin1").value = "";
    document.getElementById("tahmin2").value = "";
});

Görüşmek Üzere... Yine Bekleriz..

Tarayıcıda Aç Uygulamayı İndir

Son Güncelleme : 14 Nisan 2026 14:37, Salı

YORUMLAR (0) YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK