JavaScript Sayı Tahmin Oyunu

Yazıda JavaScript Dersleri ile öğrenilen JavaScript konularının uygulaması olan sayı tahmin oyunu yapımı anlatılmıştır.

JavaScript ile yapılabilecek basit bir uygulama olan sayı tahmin oyununu adım adım yapalım.

Oyun Yeni OYUN butonu ile başlatılır ve JavaScript tarafından rasgele bir sayı üretilir.

Oyuncu veri giriş alanına belirlenen hak sayısı kadar deneme yaparak rasgele üretilen sayıyı bulmaya çalışır.

Oyuncunun yazdığı sayı rastgele üretilen sayıdan büyükse daha küçük değer deneyin rastgele üretilen sayıdan küçükse daha BÜYÜK değer deneyin uyarıları verilerek oyuncunun hak sayısı bitmeden sayıyı bulmasına yardımcı olunur.

Oyuncu sayıyı bulduğunda Tebrikler!!! şeklinde bir mesaj verilir.

Oyuncuya verilen hak sayısı içerisinde sayıyı bulamazsa Tahmin Et butonu devre dışı kalır ve Yeni OYUN butonu ile tekrar yeni bir oyun başlatır.

Başlangıç olarak oyunun görsel ara yüzünü hazırlayalım.

<div id="sayiTahmin">
  <input type="text" id="sayi" />
  <button id="tahminEt" disabled>Tahmin Et</button>
  <button id="yeniOyun">Yeni OYUN</button>
  <p id="sonuc"></p>
</div>

Görsel arayüzüne çeşitli stil tanımlayalım.

<style>
  #sayiTahmin {
    width: 100%;
    text-align: center;
  }

  input,
  button {
    padding: 20px;
    text-align: center;
  }
</style>

İlk olarak gerekli değişkenleri oluşturalım ve HTML nesnelerinin seçimini yapalım.

<script>
"use strict";
  var hakSayisi = 0;
  var rastgeleSayi = 0;
  var _tahminEt = document.getElementById("tahminEt");
  var _yeniOyun = document.getElementById("yeniOyun");
  var _sonuc = document.getElementById("sonuc");
  var _sayi = document.getElementById("sayi");

  _yeniOyun.onclick = yeni;
  _tahminEt.onclick = tahmin;
</script>

Oyun başlatma fonksiyonunu yazalım.

<script>
"use strict";
  function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function yeni() {
    rastgeleSayi = randomInt(0, 99);
    hakSayisi = 10;
    _sonuc.innerHTML = "";
    _sayi.value = "";
    _tahminEt.disabled = false;
    _yeniOyun.disabled = true;
  }
</script>

Rastgele sayı üretme fonksiyonuna şuradaki yazımdan ulaşabilirsiniz.

Son olarak tahmin fonksiyonunu yazalım.

<script>
"use strict";
  function tahmin() {
    if (hakSayisi == 0) return;
    var girilenSayi = parseInt(_sayi.value);
    var mesaj = "";
    if (isNaN(girilenSayi)) return;

    if (rastgeleSayi > girilenSayi) {
      mesaj = "Daha BÜYÜK değer deneyin";
    } else if (girilenSayi > rastgeleSayi) {
      mesaj = "Daha küçük değer deneyin";
    } else {
      mesaj = "Tebrikler!!!";
      _tahminEt.disabled = true;
      _yeniOyun.disabled = false;
    }
    hakSayisi--;
    _sonuc.innerHTML = mesaj
    _sonuc.innerHTML += "<br />"
    _sonuc.innerHTML += "Kalan hak sayısı : " + hakSayisi
    if (hakSayisi == 0) {
      _tahminEt.disabled = true;
      _yeniOyun.disabled = false;
    }
  }
</script>

Yazılan tüm kodların açıklaması en başta yapılmıştır.

Tüm yazılan kodları birleştirdiğimizde sonuç aşağıdaki gibi olacaktır.

<script>
"use strict";
  var hakSayisi = 0;
  var rastgeleSayi = 0;
  var _tahminEt = document.getElementById("tahminEt");
  var _yeniOyun = document.getElementById("yeniOyun");
  var _sonuc = document.getElementById("sonuc");
  var _sayi = document.getElementById("sayi");

  _yeniOyun.onclick = yeni;
  _tahminEt.onclick = tahmin;

   function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function yeni() {
    rastgeleSayi = randomInt(0, 99);
    hakSayisi = 10;
    _sonuc.innerHTML = "";
    _sayi.value = "";
    _tahminEt.disabled = false;
    _yeniOyun.disabled = true;
  }
  
  function tahmin() {
    if (hakSayisi == 0) return;
    var girilenSayi = parseInt(_sayi.value);
    var mesaj = "";
    if (isNaN(girilenSayi)) return;

    if (rastgeleSayi > girilenSayi) {
      mesaj = "Daha BÜYÜK değer deneyin";
    } else if (girilenSayi > rastgeleSayi) {
      mesaj = "Daha küçük değer deneyin";
    } else {
      mesaj = "Tebrikler!!!";
      _tahminEt.disabled = true;
      _yeniOyun.disabled = false;
    }
    hakSayisi--;
    _sonuc.innerHTML = mesaj
    _sonuc.innerHTML += "<br />"
    _sonuc.innerHTML += "Kalan hak sayısı : " + hakSayisi
    if (hakSayisi == 0) {
      _tahminEt.disabled = true;
      _yeniOyun.disabled = false;
    }
  }
</script>

Kodları incelediğinizde sayı tahmin oyununun yapımının çok basit olduğunu göreceksiniz.

Oyun geliştirilerek kolay-orta-zor gibi seçenekler de eklenebilir.

Hayırlı günler dilerim.