Members programYaz Posted April 25, 2022 Members #1 Share Posted April 25, 2022 (edited) 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: Edited April 25, 2022 by programYaz Quote Ada LoveLace Link to comment https://weblep.com/topic/182-dinazor-oyunu-javascript-kaynak-kodlar%C4%B1/ Share on other sites More sharing options...
