Javascript – Zar Atma Örneği
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>
