Javascript – Zar Atma Örneği

tarihinde gönderilmiş tarafından

zar_atma uygulama dosyası için ztıklayınız …

 

Bu uygulamanın gerçekleştirilmesi için bilinmesi gerekenler,

var d1 = Math.floor(Math.random() * 6) + 1;

Math.floor : sayıyı yuvarlatmak amacıyla kullanılmaktadır. Bu fonksiyon içinde olan sayıyıy yuvarlar.

Math.random() : 0-1 arası rastgele bir sayı bulur.

1-6 arası rastgele sayı bulmak için ilgili yapı Math.floor(Math.random()*6)+1

“+1 yapılmamış olsaydı. 0-5 arası yapılmış olacaktır.

<style>
#resim{
	float: left;
	width: 32px;
	height: 32px;
}
div.zar{
	float:left;
	width:32px;
	background:#F5F5F5;
	border:#999 1px solid;
	padding:10px;
	font-size:24px;
	text-align:center;
	margin:5px;
}
</style>
<script>
function ZarAt(){

    // rast gele sayı
    var d1 = Math.floor(Math.random() * 6) + 1;
    var d2 = Math.floor(Math.random() * 6) + 1;
     
// sayıyı sayfaya yaz
     var zar1 = document.getElementById("zar1").innerHTML= d1;
    var zar2 = document.getElementById("zar2").innerHTML = d2;   

    
 // resmini goster   
    	document.getElementById("resim").innerHTML = "<img class=rsm1 src="+d1+".gif>"; 
    	//""; 
    document.getElementById("resim2").innerHTML = "<img class=rsm2 src="+d2+".gif>";
   
    
      
    
}
</script>
<style type="text/css">
	.rsm1{float: left;width: 50px;height: 50px;margin: 0px;padding: 0px;margin-left: 5px;}
	.rsm2{float: left;width: 50px;height: 50px;margin: 0px;padding: 0px;margin-left: 40px;}
	#content{margin-left: 50%;}
	#sekkilzar{width: 250px;height: 250px;margin-left: -200px;margin-top: 100px; }
</style>
</head>
<body>
	<div id="content">
	<img src="" class="rsm">
<div id="zar1" class="zar">0</div>
<div id="zar2" class="zar">0</div><br><br><br><br>
<button onclick="ZarAt()">Zar At</button><br><br><br>
<div id="resim">
	
</div>
<div id="resim2">
	
</div>


</div>
</body>