Jump to content
×
×
  • Create New...

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

Dinazor Oyunu JavaScript Kaynak Kodları

Rate this topic


programYaz
 Share


Recommended Posts

Dinazor Oyunu JavaScript Kaynak Kodları
 Share


  • Members

Flash playerın bittiği şu zamanda artık tarayıcı oyunlarının JavaScript dilini kullanarak yazıyoruz. Bu yazıda da sizlere javascript kullanarak basit bir oyun yapımını göstereceğim.

Chrome tarayıcısında internet bağlantısı gittiği zaman basit bir dinozor oyunu gelir. Sonsuza kadar oynayabileceğiniz bu oyunun en basit halini gösteren kodları aşağıda paylaşıyorum. Videoyu beğenirseniz destek olmak için beğenmeyi unutmayın.

Demo İçin Tıklayın

 

OYUNUN HTML KODLARI:

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

 

 

OYUNUN CSS KODLARI:

 
*{
    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;}
 
}
 

 

 

OYUNUN JS KODLARI:

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

 

OYUN İÇİ GÖRSEL:

kaktus.webptrex.webp

Edited by programYaz

Ada LoveLace

Link to comment
Share on other sites


Konu Altı Reklam 1
Konu Altı Reklam 2
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...