JavaScript ile Sayısal Loto

 bcakir
 31 Temmuz 2011

Merhaba arkadaşlar daha önce anlattığım bir kaç konuyu birleştirerek bir sayısal loto uygulaması geliştirdim. Bunu sizlerle paylaşmak istedim. Eğer isterseniz uygulamayı daha da geliştirip bir oyuna falan çevirebilirsiniz. Uygulama kısaca kullanıcıdan kaç kolon oynamak istediğini alıp, oynamak istenilen sayıya göre kolon açıyor ve kolonları doldurduktan sonra ise rastgele çekilişi yapıyorsunuz. Kolonları kitleme, kaç tane tutturduğu gibi işlemler yapmadım daha çok temel düzeyde bir uygulama. İsterseniz siz geliştirebilirsiniz. Eğer takıldığınız bir yer olursa da yorum yazarsanız yardımcı olurum.

<html>
<head>
<title>Sayısal Loto</title>
<script type="text/javascript">
function kolonsayisi(selectobj){
    x=selectobj.selectedIndex;
    sayi=selectobj.options[x].value;
    kolonlar(parseInt(sayi)+1);
}

function kolonlar(sayi) {
    for (i=1;i<sayi;i++){
        document.getElementById("k"+i).innerHTML="Kolon "+i;
        var divId=document.getElementById("kolon"+i);
        for (a=1;a<7;a++){
            var element=document.createElement("input");
            element.setAttribute("type", "text");
            element.setAttribute("value", "");
            element.setAttribute("name", "txt"+i+a);
            element.setAttribute("id", "txt"+i+a);
            divId.appendChild(element);     
        }
    }    
}

function cekilis() {
    sonuc="";
    for (i=0;i<6;i++){
        var r_sayi=Math.floor(Math.random()*50);
        sonuc=r_sayi+" - "+sonuc;
    }
    document.getElementById("sonuc").innerHTML=sonuc;
}
</script>
</head>
<body>
<table>
    <tr><td colspan="6">
    Oynamak istenilen kolon sayısı: 
    <select id="kolonlar" onChange="kolonsayisi(this)">
        <option value="1">1 Kolon</option>
        <option value="2">2 Kolon</option>
        <option value="3">3 Kolon</option>
        <option value="4">4 Kolon</option>
        <option value="5">5 Kolon</option>
        <option value="6">6 Kolon</option>
    </select>
    </select></td></tr>
    <tr><td><div id="k1"></div></td>
    <td><div id="k2"></div></td>
    <td><div id="k3"></div></td>
    <td><div id="k4"></div></td>
    <td><div id="k5"></div></td>
    <td><div id="k6"></div></td></tr>
    <tr><td width="150"><div id="kolon1"></div></td>
    <td width="150"><div id="kolon2"></div></td>
    <td width="150"><div id="kolon3"></div></td>
    <td width="150"><div id="kolon4"></div></td>
    <td width="150"><div id="kolon5"></div></td>
    <td width="150"><div id="kolon6"></div></td></tr>
</table>
<input type="button" value="Loto Çekilsin" onclick="cekilis()" />
<div id="sonuc"></div>
</body>
</html>

Kolonsayisi fonksiyonu ile kaç tane kolon oynamak istediğini öğrendik. Kolonlar fonksiyonuna bu değeri 1 artırarak gönderdik çünkü orada kurduğumuz değişkeni 0’dan değil 1’den başlatıyoruz. Burada parseInt kullanmamın nedeni; sayımızı karakter olarak algılamasını önlemek için. Daha önceki makalelerimde de kullandığım appendChild ile her kolonda altışar tane textbox oluşturduk. Buton ile kontrol edilen cekilis fonksiyonunda ise 6 tane rastgele sayı üretip sonuc adlı div’e yazdırdık. Uygulamamız temel olarak böyleydi. Yararlı olması dileğiyle.

 1.353 Okunma

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JavaScript
Kapat