JavaScript Örnek Projeler Serisi – At Yarışı Oyunu
Merhaba arkadaşlar, JavaScript örnek projeler serisinin ilk uygulaması olan At Yarışı oyununun kod ve video paylaşımını yazının devamında göreceksiniz. Bu zamana kadar öğrendiğiniz HTML CSS ve JavaScript dilini artık somut bir şekilde kullanarak birlikte örnek uygulamalar geliştireceğiz.
Bu tarz içeriklerin devamına youtube kanalımızdan veya web sitemizi takip ederek ulaşabilirsiniz.
O zaman AT YARIŞI oyununun yapıma başlayalım.
Örnek Projeler (1) – At Yarışı Oyunu
Öncelikle açacağımız html dosyasına aşağıdaki kodları ekleyelim. Öğrenmeniz ve el alışkanlığı yapmanız açısından kodları kopyala yapıştır yapmak yerine tek tek yazmanız sizin açınızdan daha iyi olacaktır.
<html>
<head>
<title> At Yarışı </title>
<link rel="stylesheet" href="At_Yarisi.css" type="text/css">
<script src="At_Yarisi.js" defer></script>
</head>
<body>
<div id="kapsayici">
<div id="bitis"></div>
<img id="atbir" src="atresmi1">
<hr/>
<img id="atiki" src="atresmi2">
<hr/>
<img id="atuc" src="atresmi3">
<hr/>
<img id="atdort" src="atresmi4">
<hr/>
<img id="atbes" src="atresmi5">
<hr/>
</div>
<br><br>
<center>
<button id="deneme" onclick="Baslat()"> Yarışı Başlat </button>
</center>
</body>
</html>
Yukarıdaki etiketlerin ne işe yaradığını bilmiyorsanız buraya tıklayarak etiketlerin ne işe yaradığını ve nasıl kullanıldığını öğrenebilirsiniz.
Daha sonra yaptığımız html kodlarına At_Yarisi.css adlı css kodlarını ekleyerek tasarımı zenginleştiriyoruz.
div#kapsayici{
margin-top: 25px;
background-color: olivedrab;
}
img{
width: 100px;
height: 100px;
transition: all 2s;
}
div#bitis{
width: 10px;
height: 575px;
position: relative;
float: right;
background-color: black;
margin-right: 10px;
}
button{
width: 150px;
height: 75px;
font-family: Verdana;
font-size: 20px;
}
Yine yukarıdaki css etiketlerinin ne işe yaradığını bilmiyorsanız buraya tıklayarak öğrenebilirsiniz.
Son olarak aşağıdaki kodların bulunduğu At_Yarisi.js adlı javascript dosyasını ekleyerek uygulamamızı tamamlıyoruz.
var at1=document.getElementById("atbir");
var at2=document.getElementById("atiki");
var at3=document.getElementById("atuc");
var at4=document.getElementById("atdort");
var at5=document.getElementById("atbes");
var bitis=document.getElementById("bitis").offsetLeft-120;
var rdn1=0, rdn2=0, rdn3=0, rdn4=0, rdn5=0;
var kontrol=false;
function Baslat(){
yarisma=setInterval(Yarisma,1000);
}
var Yarisma=function(){
atbir();
atiki();
atuc();
atdort();
atbes();
}
var rastgeleSayiUret= function(){
var rdn;
do{
rdn=Math.floor(Math.random()*100);
}while(rdn<50);
return rdn;
}
function atbir(){
if(rdn1<bitis){
rdn1+=rastgeleSayiUret();
if(rdn1>=bitis){
rdn1=bitis;
clearInterval(yarisma);
if(!kontrol){
kontrol=true;
setTimeout(function(){alert("Kazanan at: 1");},2000);
}
at1.style.marginLeft=bitis+"px";
}else{
at1.style.marginLeft=rdn1+"px";
}
}
}
function atiki(){
if(rdn2<bitis){
rdn2+=rastgeleSayiUret();
if(rdn2>=bitis){
rdn2=bitis;
clearInterval(yarisma);
if(!kontrol){
kontrol=true;
setTimeout(function(){alert("Kazanan at: 2");},2000);
}
at2.style.marginLeft=bitis+"px";
}else{
at2.style.marginLeft=rdn2+"px";
}
}
}
function atuc(){
if(rdn3<bitis){
rdn3+=rastgeleSayiUret();
if(rdn3>=bitis){
rdn3=bitis;
clearInterval(yarisma);
if(!kontrol){
kontrol=true;
setTimeout(function(){alert("Kazanan at: 3");},2000);
}
at3.style.marginLeft=bitis+"px";
}else{
at3.style.marginLeft=rdn3+"px";
}
}
}
function atdort(){
if(rdn4<bitis){
rdn4+=rastgeleSayiUret();
if(rdn4>=bitis){
rdn4=bitis;
clearInterval(yarisma);
if(!kontrol){
kontrol=true;
setTimeout(function(){alert("Kazanan at: 4");},2000);
}
at4.style.marginLeft=bitis+"px";
}else{
at4.style.marginLeft=rdn4+"px";
}
}
}
function atbes(){
if(rdn5<bitis){
rdn5+=rastgeleSayiUret();
if(rdn5>=bitis){
rdn5=bitis;
clearInterval(yarisma);
if(!kontrol){
kontrol=true;
setTimeout(function(){alert("Kazanan at: 5");},2000);
}
at5.style.marginLeft=bitis+"px";
}else{
at5.style.marginLeft=rdn5+"px";
}
}
}
JavaScript derslerine buraya tıklayarak ulaşabilirsiniz.
İlk uygulamamızın sonuna geldik, sizde artık öğrendiklerinizi pratiğe dökmek istiyorsanız sitemizi takip etmeyi unutmayın. Birlikte birçok uygulama geliştireceğiz, sağlıcakla kalın.
JavaScript örnek projeler serisinin at yarışı bölümünü inceledik. Bu ve benzer konuları aşağıdaki linke tıklayarak JavaScript kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter adreslerine tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/javascript/
Sosyal Medya Hesaplarımız
