Çoğumuz Google Chrome’da korkunç “İnternet Yok” hata mesajını gördük. Aslında bu ekranı eğlenceli, dinozor temalı sonsuz bir koşucu oyunudur. Bu yazıda sizlere bu oyunun basit bir halini nasıl yapacağınızı göstereceğim.
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:
