Algoritma ile ilgili örnek yaparken sonsuz döngüler ile ilgili örneklerde klasik verilen örnektir. Bilgisayarın tuttuğu sayıyı tahmin etme oyunu, bu sefer ki oyun tam tersi olarak hazırlanmıştır. Yani kullanıcının tuttuğu sayıyı bilgisayar tahmin etmeye çalışacaktır.
Kullanıcının Tuttuğu Sayıyı 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ıyısını ekrana yazacaktır.
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; } |
Bu örneğin hazırlanması için gerekli algoritma ve çalışmaları yapan Sinem’e teşekkürler.
