Hiç Chrome’da Google Dinozor / T-Rex Oyunu oynadınız mı? Umarım internetin her düştüğünde yapmışsındır.
Dürüst olmak gerekirse, Google Chrome sürekli olarak bilgisayarınızda, tabletinizde ve hatta mobil cihazınızda bağlantıyı tekrar kurmaya çalışırken (perde arkasında) sizi meşgul eden gerçekten bağımlılık yapan bir oyundur.
Bu yazıyı yazmanın tek amacı, Google Dinozor / T-Rex Oyunu’nu basit olarak nasıl yapacağınızı göstermektedir. Oyunda temel bir kaç nesne ve basit bir oynama seçeneği sunacağım. Oyunu geliştirmek sizlerin hayal gücüne kalmış.
Oyunun yapılış videosunu izlemek için videoya tıklayın.
Oyunun HTML kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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 kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
*{ 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 JavaScript kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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); |
Oyundaki görseller:
Yorum Yap