JavascriptJavascript

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Java İle Dinozor Oyunu Yapım Uygulaması programını aktaracağız.  Java da kodlama nasıl gerçekleşir? Java İle Dinozor Oyunu Yapım Uygulaması nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.

Java programlama Örnekleri

Java İle Dinozor Oyunu Yapım Uygulaması Kod Alanı

Java programlama dilinde Dinozor Oyunu Yapım Uygulaması kod metnini oluşturduk. Bu uygulamamızda html, css, JavaScript kodlama dillerini kullanarak dinozor oyunu yapacağız. Bu uygulamamız 3 farklı kod metin alanından oluşmaktadır. Dinozorun görselinin seçimini sizlere bıraktık. Ayrıca kod metinleri arasında ufak açıklamalar yaparak bu 3 ayrı ve uzun zorlayıcı olan kod metini anlaşılır kılmaya çalıştık. Uygulamamız internet gittiğinde Google da oynadığımız dinozor oyununu örnek alarak yapılmıştır. İlk olarak bu uygulama da kullanılacak Html kod metinini ekleyeceğiz:
<!DOCTYPE html>
<html lang="tr" onclick="zipla()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tasarimkodlama.com</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="oyun">
        <div id="trex"></div>
        <div id="kaktus"></div>
    </div>
<script src="script.js"></script>
</body>
</html>
Oyuk kod metnimizin devamında Css kod metinini sizlerle paylaştık. Dinozor oyun yapımı içerisinde en önemli kod metni olan css kod metni aşağıdaki gibidir:
*{
    margin:0;
    padding: 0;
}
body
{
    background: #000;
}

#oyun
{
    width: 800px;
    height: 200px;
    border:1px solid #000;
    background: #fff;
    margin:100px auto;
    position: relative;
    overflow:hidden;
}

#trex
{
    position: absolute;
    width: 39px;
    height: 42px;
    background: url(trex.png);
    bottom:0;
    
}
.trex-animate
{
    animation: trex .5s linear;
}

#kaktus
{
    position: absolute;
    width: 23px;
    height: 46px;
    background: url(kaktus.png);
    bottom: 0;
    left:775px;
}
.kaktus-animate{
    animation:kaktus 2s linear infinite;
}

@keyframes kaktus
{
    0%{left:775px;
}
    100%{left:-40px
}
}
@keyframes trex
{
    0%{bottom:0px;
}
    25%{bottom:70px;
}
    75%{bottom:70px;
}
    100%{bottom:0px;
}

}
Uygulamamızın son kod ve ana kod kısmını JavaScript  programlama dilinde oluşturduk. JavaScript ile oluşturduğumuz bu uygulamamızın son kod metin kısmı aşağıdaki gibidir:
const trex=document.querySelector("#trex");
const kaktus=document.querySelector("#kaktus");

function zipla()
{
   
    if(kaktus.classList!="kaktus-animate")
    {
        kaktus.classList.add("kaktus-animate");
    }

    if(trex.classList!="trex-animate")
    {
        trex.classList.add("trex-animate");
        setTimeout(function(){
            trex.classList.remove("trex-animate");
        }
	,500);
    }
}

var carpismaKOntrol =setInterval(function()
{

        var trexBottom =parseInt(window
                .getComputedStyle(trex)
                .getPropertyValue("bottom"));

        var kaktusLeft =parseInt(window
                .getComputedStyle(kaktus)
                .getPropertyValue("left"));
        
        if(kaktusLeft > 0 && kaktusLeft < 40 && trexBottom < 40){
            
            kaktus.classList.remove("kaktus-animate");
            kaktus.style.display="none";
            alert("oyun bitti");
        }
},10);

 

Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Java programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz. 

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir