Javascript (Jquery) ile Sayısal Loto Uygulaması

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ı*/


var toplar=[],sayi,sayac=0;

/*şanslı sayıları belirliyoruz*/
while(sayac &lt; 6)
{
	sayi=Math.floor(Math.random()*49)+1;
	if(toplar.indexOf(sayi)==-1)
	{
		toplar.push(sayi);
		sayac++;
	}
}

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.


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

/*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.


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

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


/*toplarımızı oluşturup ekrana yerleştiriyoruz.*/
$(".top").each(function(index, element) {
  
   var kutuSayi=Number($(element).html());
   if(toplar.indexOf(kutuSayi)&gt;=0)
   {
   		$(element).css({"background":"red"});
   }
});

/*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.


<!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>

<!doctype html>

<html>

<head>

<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>

/*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.


<!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>

<!doctype html>

<html>

<head>

<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>

//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ı

Diğer Örnekler:

Yorum yap X

Diğer Örnekler:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin