Sonic Run!!! Group D P’FaiiFuu
✨ Pruktapong Sukjaroen
<!DOCTYPE html> <html lang="en" onkeypress="jump()"> <head> <meta charset="UTF-8" /> <title>DINO GAME</title> <style> body { background: url("https://i.gifer.com/6oa.gif"); background-size: cover; text-align: center; } * { padding: 0; margin: 0; overflow-x: hidden; } p { font-size: 18px; font-family: Cursive; padding: 3em; display: inline-block; padding: 1em; color: black; border: 0.5px solid black; background-color: white; text-align: center; } .street { position: absolute; width: 1000px; height: 60px; background-image: url("https://media.indiumgames.com/medialibrary/2014/07/MakingMap1.png"); top: 490px; } .game { width: 1000px; height: 500px; border: 10px solid black; margin: auto; background-image: url("https://media.giphy.com/media/xWMPYx55WNhX136T0V/giphy.gif"); background-size: cover; opacity: 1; } #character { width: 100px; height: 100px; content: url("https://media.giphy.com/media/3o7WIGxb4UDlYxZa1O/giphy.gif"); position: relative; animation-direction: alternate; top: 370px; left: 100px; opacity: 1.5; } .animate { animation: jump 0.7s linear; } @keyframes jump { 0% { top: 350px; } 30% { top: 210px; } 60% { top: 210px; } 100% { top: 350px; } } #block { width: 190px; height: 150px; transform: scaleX(-1); content: url("https://www.scacciarischi.it/images/2018/08/28/snack_nemico.gif"); position: relative; top: 230px; left: 1250px; animation: block 3s infinite linear; } @keyframes block { 0% { left: 1250px; } 100% { left: -90px; } } p { text-align: center; } .text{ top:100px; position: relative; text-align: center; font-family: Cursive; font-size:25px; color:hsla(0,0%,0%,0.7); } </style> </head> <body> <h3 class="text">Press Any Key To Play</h3> <div class="game"> <div class="street"></div> <div id="character"></div> <div id="block"></div> </div> <br /> <p>Score: <span id="scoreSpan"></span></p> <iframe width="0" height="0" src="https://www.youtube.com/embed/mRN_T6JkH-c?&autoplay=1&mute=0.95" > </iframe> <script> var character = document.getElementById("character"); var block = document.getElementById("block"); function jump() { if (character.classList == "animate") { return; } character.classList.add("animate"); setTimeout(function () { character.classList.remove("animate"); }, 700); } function change1() { document.querySelector(".game").style.backgroundImage = "url('https://i.pinimg.com/originals/f7/5e/a1/f75ea1618a17a73cb48f951cbd9a0aab.gif')"; } function change2() { document.querySelector(".game").style.backgroundImage = "url('https://media.giphy.com/media/k81NasbqkKA5HSyJxN/giphy.gif')"; } function change3() { document.querySelector(".game").style.backgroundImage = "url('https://media.giphy.com/media/9B7XwCQZRQfQs/giphy.gif')"; } function change4() { document.querySelector(".game").style.backgroundImage = "url('https://media.giphy.com/media/N3yLGQ1oMYfGU/giphy.gif')"; } function change5() { document.querySelector(".game").style.backgroundImage = "url('https://media.giphy.com/media/xWMPYx55WNhX136T0V/giphy.gif')"; } var counter = 0; var checkDead = setInterval(function () { let characterTop = parseInt( window.getComputedStyle(character).getPropertyValue("top") ); let blockLeft = parseInt( window.getComputedStyle(block).getPropertyValue("left") ); if (blockLeft < 150 && blockLeft > -60 && characterTop >= 370) { block.style.animation = "none"; document.querySelector(".game").style.backgroundImage = "url('https://media.giphy.com/media/xWMPYx55WNhX136T0V/giphy.gif')"; alert("Game Over. score: " + Math.floor(counter / 100)); counter = 0; block.style.animation = "block 3s infinite linear"; } else { if (counter / 100 > 100) { change1(); block.style.animation = "block 0.7s infinite linear"; } else if (counter / 100 > 80) { change2(); block.style.animation = "block 1s infinite linear"; } else if (counter / 100 > 60) { change3(); block.style.animation = "block 1.5s infinite linear"; } else if (counter / 100 > 40) { change4(); block.style.animation = "block 2s infinite linear"; } else if (counter / 100 > 20) { change5(); block.style.animation = "block 2.3s infinite linear"; } counter++; document.getElementById("scoreSpan").innerHTML = Math.floor( counter / 100 ); } }, 10); </script> </body> </html>