Run away!!! Group’D P’FaiiFuu

✨ PHATCHARAPON SASAWATTECHA

<!DOCTYPE html>
<html lang="en" onkeypress="jump()">
  <head>
    <meta charset="UTF-8" />
    <title>DINO GAME</title>

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

.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://i.gifer.com/3F3F.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: 150px;
        height: 150px;
        transform: scaleX(-1);
        content: url("https://i.gifer.com/3MfN.gif");
        position: relative;
        top: 250px;
        left: 500px;
        animation: block 2s infinite linear;
      }
      @keyframes block {
        0% {
          left: 1200px;
        }
        100% {
          left: -100px;
        }
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="game">
      <div id="character"></div>
      <div id="block"></div>
    </div>
    <br />
    <p>Score: <span id="scoreSpan"></span></p>
    <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 < 130 && blockLeft > -100 && characterTop >= 350) {
          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 2s infinite linear";
        } else {
          if (counter / 100 > 50) {
            change1();
            block.style.animation = "block 0.7s infinite linear";
          } else if (counter / 100 > 40) {
            change2();
            block.style.animation = "block 0.9s infinite linear";
          } else if (counter / 100 > 30) {
            change3();
            block.style.animation = "block 1s infinite linear";
          } else if (counter / 100 > 20) {
            change4();
            block.style.animation = "block 1.5s infinite linear";
          } else if (counter / 100 > 10) {
            change5();
            block.style.animation = "block 2s infinite linear";
          }
          counter++;
          document.getElementById("scoreSpan").innerHTML = Math.floor(
            counter / 100
          );
        }
      }, 10);
    </script>
  </body>
</html>