Javascript (Jquery) ile Sayısal Loto Uygulaması

sdkbyrm · 23 Aralık 2020

Algoritma geliştirmeye de önemli ölçüde faydası olduğunu düşündüğüm (oynanmasını kesinlikle karşıyım) bir uygulama olan Sayısal Loto uyununun
Csharp(C#), Java, PHP, C++ gibi programlama dilleri ile yazılmış doğru algoritmalarını bulmak mümkün.
Ben de bu uygulamada Javascript (Jquery) ile doğru çalışan bir örneğini hazırlayacağım.
Javascript (Jquery) ile doğru şekilde yazılmış olan uygulamasını internette bulamadığım için kolları sıvayıp kendim yazmaya karar verdim.

Javascript Algoritma Sayısal Loto
Her soruda olduğu gibi öncelikle sorunun doğru tanımlamak gerekir. Sayısal loto uygulamasını yapmadan önce sayısal lotonun ne olduğuna wikipedia üzerinden araştırdım.

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++;
}
}

Sayıları belirleme işlemi bittikten sonra jquery ile 1-49 arasındaki topları ekranda göstermek için gerekli olan jquery kodumu yazıyorum.

1
2
3
4
5
6

/*toplarımızı oluşturup ekrana yerleştiriyoruz.*/
for(i=1;i < 50;i++)
{
$("

“).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.
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>

Yukarıda ki örneğin Buton eklenmiş haldeki Uygulama2.html kodları aşağıdadır.

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>

Javascript (Jquery) ile Sayısal Loto Uygulaması

sdkbyrm

Diğer Örnekler:​

Diğer Örnekler: