Bu örnekte Javascript ile kullanıcının aklından tuttuğu sayının bilgisayar tarafından bulunmasını sağlayacağız.
Kullanıcının Tuttuğu Sayıyı Bilgisayarın Tahmin Etme Örneğinin Çalışma Mantığı Şu Şekildedir.
- Başla butonuna basıldığında bilgisayar 0 ile 100 arasında bir sayı söyler.
- Eğer bilgisayarın tuttuğu sayı kullanıcının zihnindeki sayıdan küçükse kullanıcı yukarı butonuna basarak bilgisayarın daha yüksek bir sayı söylemesini ister.
- Eğer bilgisayarın tuttuğu sayı kullanıcının zihnindeki sayıdan büyükse kullanıcı aşağı butonuna basarak bilgisayarın daha düşük bir sayı söylemesini ister.
- Bilgisayar bu iki aralıkta tahmin aralığını daraltarak kullanıcının hangi sayıyı tuttuğunu tahmin etmeye çalışır.
- Eğer kullanıcının zihnindeki sayı bilgisayarın tuttuğu sayı ile eşleşirse tebrikler deyip, tahmin sayısını ekrana yazacaktır.
Oyunun Demosu için TIKLA
HTML: Örneğimiz için HTML kodlarımız şu şekilde oluşturuyoruz.
1 2 3 4 5 6 7 | <button id="basla">BAŞLA</button> <button id="yukari">Yukarı</button> <button id="asagi">Aşağı</button> <button id="onayla">Tebrikler</button> <div id="durum"></div> |
CSS: Nesnelerin ekranda düzgün görünmesi için gerekli CSS düzenlemesi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | body{ text-align: center; } button{ width: 200px; height: 200px; line-height: 200px; text-align: center; background:#e74c3c; border:none; color:#fff; } button:hover{ background:#f1c40f; color:#000; } button:disabled{ background:#95a5a6; } #durum{ font-size: 3em; } |
JS: Uygulamanın iskeletini oluşturan javascript kodları. Önce kodların tamamını yazalım sonra adım adım açıklamalarını yaparız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | /*değişkenlerin tanımlanması*/ var ustSayi,altSayi,sayac,pctutulan; /*HTML nesnelerinin seçilmesi*/ var basla=document.getElementById("basla"); var yukari=document.getElementById("yukari"); var asagi=document.getElementById("asagi"); var onayla=document.getElementById("onayla"); var durum=document.getElementById("durum"); /*nesnelere ait olayların tanımlanması*/ basla.onclick=function(){ ustSayi=100; altSayi=0; sayac=0; basla.disabled = true; pcTahmin();//bilgisayarın tahmini için aşağıdaki pc tahmin fonksiyonunu oluşturdum } yukari.onclick=function(){ altSayi=pctutulan; pcTahmin();//bilgisayarın tahmini için aşağıdaki pc tahmin fonksiyonunu oluşturdum } asagi.onclick=function(){ ustSayi=pctutulan; pcTahmin();//bilgisayarın tahmini için aşağıdaki pc tahmin fonksiyonunu oluşturdum } onayla.onclick=function(){ durum.innerHTML="Bilgisayar "+sayac+" Tahminde Bildi!"; basla.disabled = false; } /*bilgisayarın tahmini*/ function pcTahmin(){ sayac++; pctutulan=Math.random(); pctutulan=pctutulan*(ustSayi-altSayi); pctutulan=Math.floor(pctutulan)+altSayi; durum.innerHTML="Bilgisayarın Tahmini:"+pctutulan; } |
JavaScript Kodlarının açıklamasını yapalım.
Bilgisayarın tahmin aralığını belirtmek için ustSayi ve altSayi değişkenlerini kullanıyoruz. Sayac her tahminde 1 sefer artacaktır. pctutulan değişkeni içinde ise bilgisayarın tuttuğu sayıyı saklayacağız.
1 2 3 | var ustSayi,altSayi,sayac,pctutulan; |
Ekrandaki HTML elementlerini kontrol etmek için nesneleri getElementById ile seçiyoruz.
1 2 3 4 5 6 7 | var basla=document.getElementById("basla"); var yukari=document.getElementById("yukari"); var asagi=document.getElementById("asagi"); var onayla=document.getElementById("onayla"); var durum=document.getElementById("durum"); |
pcTahmin fonksiyonu her çalıştığında sayacı 1 arttırıp istenilen aralıkta rastgele bir sayı üretmek için kullanılmaktadır. durum.innerHTML ile tahminini durum etiketinde göstermektedir.
1 2 3 4 5 6 7 8 9 | function pcTahmin(){ sayac++; pctutulan=Math.random(); pctutulan=pctutulan*(ustSayi-altSayi); pctutulan=Math.floor(pctutulan)+altSayi; durum.innerHTML="Bilgisayarın Tahmini:"+pctutulan; } |
basla nesnesine tıklandığında sayı tahmin aralığını 0 ile 100 arasına çekip pcTahmin() fonksiyonu ile bilgisayarın rastgele bir sayı üretmesini sağlıyoruz.
1 2 3 4 5 6 7 8 9 10 | basla.onclick=function(){ ustSayi=100; altSayi=0; sayac=0; basla.disabled = true; pcTahmin();//bilgisayarın tahmini için aşağıdaki pc tahmin fonksiyonunu oluşturdum } |
Bilgisayarın tuttuğu sayı küçükse yukarı butonuna tıklayıp, bilgisayarın tahmin etmesi için alt sınırı az önce söylediği sayı yapıp, tekrar tahmin etmesini istiyoruz.
1 2 3 4 5 6 | yukari.onclick=function(){ altSayi=pctutulan; pcTahmin();//bilgisayarın tahmini için aşağıdaki pc tahmin fonksiyonunu oluşturdum } |
Bilgisayarın tuttuğu sayı büyükse aşağı butonuna tıklayıp, bilgisayarın tahmin etmesi için üst sınır az önce söylediği sayı yapıp, tekrar tahmin etmesini istiyoruz.
1 2 3 4 5 6 7 | asagi.onclick=function(){ ustSayi=pctutulan; pcTahmin();//bilgisayarın tahmini için aşağıdaki pc tahmin fonksiyonunu oluşturdum } |
Tutulan sayıyı bilgisayar doğru olarak bildiyse onayla butonuna basıp ekrana tahmin sayısını yazdırıyoruz. Pasif moda çekilen basla butonunu da aktifleştiriyoruz.
1 2 3 4 5 6 | onayla.onclick=function(){ durum.innerHTML="Bilgisayar "+sayac+" Tahminde Bildi!"; basla.disabled = false; } |
