Sans oyunları gibi benzer oyunların algoritması programlama mantığı bakımından güzel algoritmalardır. (oynanmasını kesinlikle karşıyım) Bu sayısal loto için gerekli olan algoritmayı daha önce başka bir sitede yayımlamıştım. Yapılan uygulamanın kodlarını yazılım bilişim sitesine eklemek istedim. Bir çok programlama dili ile hazırlamış olan uygulamayı ben de Javascript (Jquery) ile doğru çalışan bir örneğini hazırlayacağım.
Şunu belirteyim. Uygulamanın doğru düzgün çalışan hali dost bir site ve burası dışında pek bir alternatifi yok. En azından grafiksel olarak düzgün bir şekilde görünen hali hazırlanmamıştır.
Javascript Algoritma Sayısal Loto
DEMO
İlk yapılması gereken iş sorunun tam olarak ne olduğunu iyice bir anlamak. Sorunu anlamadan yazılan her kod sadece boşa çekilen kürektir. Eksik yazılan kodlar programcıyı tekrar tekrar başa dönmek zorunda bırakır. Bunu içinde internette bu oyunun nasıl oynandığını araştırdım. Aşağıdaki gibi bir liste oluşturup kodlamaya geçmeye hazır olduğuma karar verdim.
Sayısal Loto: 49 sayı içerisinde seçilecek 6 sayıyı bilme üzerine dayalı şans oyunudur.
Bu tanımdan yola çıkarak öncelikle 1-49 arasında rastgele 6 sayı belirleyen javascript kodumu yazıyorum.
/*sayıların belirlenmesi için gerekli global değişkenlerin tanımlanması*/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var toplar=[],sayi,sayac=0; /*şanslı sayıları belirliyoruz*/ while(sayac < 6) { sayi=Math.floor(Math.random()*49)+1; if(toplar.indexOf(sayi)==-1) { toplar.push(sayi); sayac++; } } |
Yukarıda şans oyunundaki sayıları belirleyip bir diziye ekledim. Jquery ile 1-49 arasındaki topları ekranda göstermek için gerekli olan jquery kodumu yazıyorum.
|
1 2 3 4 5 6 7 |
/*toplarımızı oluşturup ekrana yerleştiriyoruz.*/ for(i=1;i < 50;i++) { $("<div class='top'>").appendTo($("body")).html(i); } |
top class için css tasarımını ile div nesnelerinin ekranda top gibi görünmesini sağlıyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.top{ background:rgba(59,182,233,1.00); width:100px; height:100px; line-height:100px; border-radius:50%; text-align:center; font-size:1.5em; font-weight:500; float:left; margin:5px; } |
toplar dizisinin içinde rastgele seçilmiş 6 sayı olduğunu biliyoruz. ekrandaki div nesneleri üzerinde querynin each metodu ile tek tek hareket ederek. dizimdeki sayıların div nesnelerinin içinde olup olmadığını kontrol ediyorum.
|
1 2 3 4 5 6 7 8 9 10 11 |
/*toplarımızı oluşturup ekrana yerleştiriyoruz.*/ $(".top").each(function(index, element) { var kutuSayi=Number($(element).html()); if(toplar.indexOf(kutuSayi)>=0) { $(element).css({"background":"red"}); } }); |
Yazdığımız kodları html dosyası içinde toparlayalım.
Yada aşağıdaki butonsuz ve butonlu olarak iki sayfa tasarımı yapılmıştır. uygulama.html olarak kaydedip her hangi bir tarayıcı ile açıyoruz.
|
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>ŞANS TOPU</title> <style> .top{ background:rgba(59,182,233,1.00); width:100px; height:100px; line-height:100px; border-radius:50%; text-align:center; font-size:1.5em; font-weight:500; float:left; margin:5px; } </style> </head> <body> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script> /*sayıların belirlenmesi için gerekli global değişkenlerin tanımlanması*/ var toplar=[],sayi,sayac=0; /*şanslı sayıları belirliyoruz*/ while(sayac < 6) { sayi=Math.floor(Math.random()*49)+1; if(toplar.indexOf(sayi)==-1) { toplar.push(sayi); sayac++; } } /*toplarımızı oluşturup ekrana yerleştiriyoruz.*/ for(i=1;i < 50;i++) { $("<div class='top'>").appendTo($("body")).html(i); } $(".top").each(function(index, element) { var kutuSayi=Number($(element).html()); if(toplar.indexOf(kutuSayi)>=0) { $(element).css({"background":"red"}); } }); </script> </body> </html> |
|
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ŞANS TOPU</title> <style> .top{ background:rgba(59,182,233,1.00); width:100px; height:100px; line-height:100px; border-radius:50%; text-align:center; font-size:1.5em; font-weight:500; float:left; margin:5px; } button{ background:rgba(33,37,15,1.00); font-weight:bold; font-size:2em; color:#D8DD05; padding:10px; border:none; } </style> </head> <body> <button>OYNA</button> <div style="clear:both"></div> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script> //sayisalOyna fonksiyonunu çağırıyoruz. $("button").click(sayisalOyna); /*toplarımızı oluşturup ekrana yerleştiriyoruz.*/ for(i=1;i<50;i++) { $("<div class='top'>").appendTo($("body")).html(i); } function sayisalOyna(){ /*sayıların belirlenmesi için gerekli global değişkenlerin tanımlanması*/ var toplar=[],sayi,sayac=0; /*şanslı sayıları belirliyoruz*/ while(sayac<6) { sayi=Math.floor(Math.random()*49)+1; if(toplar.indexOf(sayi)==-1) { toplar.push(sayi); sayac++; } } /*arkaplanı ilk rengi ile boyuyoruz. ikinci ve diğer tıklamalar için önemli*/ $(".top").css({"background":"rgba(59,182,233,1.00)"}); $(".top").each(function(index, element) { var kutuSayi=Number($(element).html()); if(toplar.indexOf(kutuSayi)>=0) { $(element).css({"background":"red"}); } }); } </script> </body> </html> |
[…] Sayısal Loto Örneği […]
[…] ile rastgele sayı üretme konusunu Sayısal Loto Uygulaması ve Math Nesnesi Metotları ile anlatmıştım. Ayrı bir başlık ile burada da değinmek […]
[…] Sayısal Loto Örneği […]
hocam each nedir orada ne işe yarıyor ?
Programlama dillerinde kullanılan foreach deyimi ile benzer bir yapısı var. Dizi üzerindeki elemanları ileri yönlü okumak için kullanılıyor.