index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dinosaurio Chrome V2</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        height: 100vh;
        background: #0b0c0a;
        display: flex;
        align-items: center;
      }

      .contenedor {
        width: 920px;
        height: 480px;
        margin: 0 auto;

        position: relative;

        background: linear-gradient(#b7d6c7, transparent) #ffe2d1; /*linear-gradient(#90ebff, white);*/
        transition: background-color 1s linear;
        overflow: hidden;
      }

      .mediodia {
        background-color: #ffdcf3;
      }

      .tarde {
        background-color: #ffadad;
      }

      .noche {
        background-color: #aca8c7;
      }

      .dino {
        width: 84px;
        height: 84px;

        position: absolute;
        bottom: 22px;
        left: 42px;
        z-index: 2;

        background: url(img/dino.png) repeat-x 0px 0px;
        background-size: 336px 84px;
        background-position-x: 0px;
      }

      .dino-corriendo {
        animation: animarDino 0.25s steps(2) infinite;
      }
      .dino-estrellado {
        background-position-x: -252px;
      }

      .suelo {
        width: 200%;
        height: 42px;

        position: absolute;
        bottom: 0;
        left: 0;

        background: url(img/suelo.png) repeat-x 0px 0px;
        background-size: 50% 42px;
      }

      .cactus {
        width: 46px;
        height: 96px;

        position: absolute;
        bottom: 16px;
        left: 600px;
        z-index: 1;

        background: url(img/cactus1.png) no-repeat;
      }
      .cactus2 {
        width: 98px;
        height: 66px;

        background: url(img/cactus2.png) no-repeat;
      }

      .nube {
        width: 92px;
        height: 26px;

        position: absolute;
        z-index: 0;

        background: url(img/nube.png) no-repeat;
        background-size: 92px 26px;
      }

      .score {
        width: 100px;
        height: 30px;

        position: absolute;
        top: 5px;
        right: 15px;
        z-index: 10;

        color: #d48871;
        font-family: Verdana;
        font-size: 30px;
        font-weight: bold;
        text-align: right;
      }

      .game-over {
        display: none;

        position: absolute;
        width: 100%;

        text-align: center;
        color: #7e928b;
        font-size: 30px;
        font-family: Verdana;
        font-weight: 700;
      }

      @keyframes animarDino {
        from {
          background-position-x: -84px;
        }
        to {
          background-position-x: -252px;
        }
      }
    </style>
  </head>
  <body>
    <div class="contenedor">
      <div class="suelo"></div>

      <div class="dino dino-corriendo"></div>

      <div class="score">0</div>
    </div>

    <div class="game-over">GAME OVER</div>

    <script>
      //****** GAME LOOP ********//

      var time = new Date();
      var deltaTime = 0;

      if (
        document.readyState === "complete" ||
        document.readyState === "interactive"
      ) {
        setTimeout(Init, 1);
      } else {
        document.addEventListener("DOMContentLoaded", Init);
      }

      function Init() {
        time = new Date();
        Start();
        Loop();
      }

      function Loop() {
        deltaTime = (new Date() - time) / 1000;
        time = new Date();
        Update();
        requestAnimationFrame(Loop);
      }

      // Controlador de eventos para detectar la tecla de espacio presionada
      document.addEventListener("keydown", function (event) {
        if (event.code === "Space" && parado) {
          Restart();
        }
      });

      function Restart() {
        // Reiniciamos todas las variables
        document.querySelector(".game-over").style.display = "none";
        document
          .querySelectorAll(".cactus, .cactus2")
          .forEach(function (obstaculo) {
            obstaculo.remove();
          });
        sueloX = 0;
        velEscenario = 1280 / 3;
        gameVel = 1;
        score = 0;
        parado = false;
        saltando = false;
        tiempoHastaObstaculo = 2;
        tiempoHastaNube = 0.5;
        obstaculos = [];
        dinoPosY = sueloY;
        dinoPosX = 42;
        // Reiniciamos el juego
        Start();
      }

      //****** GAME LOGIC ********//

      var sueloY = 22;
      var velY = 0;
      var impulso = 900;
      var gravedad = 2500;

      var dinoPosX = 42;
      var dinoPosY = sueloY;

      var sueloX = 0;
      var velEscenario = 1280 / 3;
      var gameVel = 1;
      var score = 0;

      var parado = false;
      var saltando = false;

      var tiempoHastaObstaculo = 2;
      var tiempoObstaculoMin = 0.7;
      var tiempoObstaculoMax = 1.8;
      var obstaculoPosY = 16;
      var obstaculos = [];

      var tiempoHastaNube = 0.5;
      var tiempoNubeMin = 0.7;
      var tiempoNubeMax = 2.7;
      var maxNubeY = 270;
      var minNubeY = 100;
      var nubes = [];
      var velNube = 0.5;

      var contenedor;
      var dino;
      var textoScore;
      var suelo;
      var gameOver;

      function Start() {
        gameOver = document.querySelector(".game-over");
        suelo = document.querySelector(".suelo");
        contenedor = document.querySelector(".contenedor");
        textoScore = document.querySelector(".score");
        dino = document.querySelector(".dino");
        document.addEventListener("keydown", HandleKeyDown);
      }

      function Update() {
        if (parado) return;

        MoverDinosaurio();
        MoverSuelo();
        DecidirCrearObstaculos();
        DecidirCrearNubes();
        MoverObstaculos();
        MoverNubes();
        DetectarColision();

        velY -= gravedad * deltaTime;
      }

      function HandleKeyDown(ev) {
        if (ev.keyCode == 32) {
          Saltar();
        }
      }

      function Saltar() {
        if (dinoPosY === sueloY) {
          saltando = true;
          velY = impulso;
          dino.classList.remove("dino-corriendo");
        }
      }

      function MoverDinosaurio() {
        dinoPosY += velY * deltaTime;
        if (dinoPosY < sueloY) {
          TocarSuelo();
        }
        dino.style.bottom = dinoPosY + "px";
      }

      function TocarSuelo() {
        dinoPosY = sueloY;
        velY = 0;
        if (saltando) {
          dino.classList.add("dino-corriendo");
        }
        saltando = false;
      }

      function MoverSuelo() {
        sueloX += CalcularDesplazamiento();
        suelo.style.left = -(sueloX % contenedor.clientWidth) + "px";
      }

      function CalcularDesplazamiento() {
        return velEscenario * deltaTime * gameVel;
      }

      function Estrellarse() {
        dino.classList.remove("dino-corriendo");
        dino.classList.add("dino-estrellado");
        parado = true;
      }

      function DecidirCrearObstaculos() {
        tiempoHastaObstaculo -= deltaTime;
        if (tiempoHastaObstaculo <= 0) {
          CrearObstaculo();
        }
      }

      function DecidirCrearNubes() {
        tiempoHastaNube -= deltaTime;
        if (tiempoHastaNube <= 0) {
          CrearNube();
        }
      }

      function CrearObstaculo() {
        var obstaculo = document.createElement("div");
        contenedor.appendChild(obstaculo);
        obstaculo.classList.add("cactus");
        if (Math.random() > 0.5) obstaculo.classList.add("cactus2");
        obstaculo.posX = contenedor.clientWidth;
        obstaculo.style.left = contenedor.clientWidth + "px";

        obstaculos.push(obstaculo);
        tiempoHastaObstaculo =
          tiempoObstaculoMin +
          (Math.random() * (tiempoObstaculoMax - tiempoObstaculoMin)) / gameVel;
      }

      function CrearNube() {
        var nube = document.createElement("div");
        contenedor.appendChild(nube);
        nube.classList.add("nube");
        nube.posX = contenedor.clientWidth;
        nube.style.left = contenedor.clientWidth + "px";
        nube.style.bottom =
          minNubeY + Math.random() * (maxNubeY - minNubeY) + "px";

        nubes.push(nube);
        tiempoHastaNube =
          tiempoNubeMin +
          (Math.random() * (tiempoNubeMax - tiempoNubeMin)) / gameVel;
      }

      function MoverObstaculos() {
        for (var i = obstaculos.length - 1; i >= 0; i--) {
          if (obstaculos[i].posX < -obstaculos[i].clientWidth) {
            obstaculos[i].parentNode.removeChild(obstaculos[i]);
            obstaculos.splice(i, 1);
            GanarPuntos();
          } else {
            obstaculos[i].posX -= CalcularDesplazamiento();
            obstaculos[i].style.left = obstaculos[i].posX + "px";
          }
        }
      }

      function MoverNubes() {
        for (var i = nubes.length - 1; i >= 0; i--) {
          if (nubes[i].posX < -nubes[i].clientWidth) {
            nubes[i].parentNode.removeChild(nubes[i]);
            nubes.splice(i, 1);
          } else {
            nubes[i].posX -= CalcularDesplazamiento() * velNube;
            nubes[i].style.left = nubes[i].posX + "px";
          }
        }
      }

      function GanarPuntos() {
        score++;
        textoScore.innerText = score;
        if (score == 5) {
          gameVel = 1.5;
          contenedor.classList.add("mediodia");
        } else if (score == 10) {
          gameVel = 2;
          contenedor.classList.add("tarde");
        } else if (score == 20) {
          gameVel = 3;
          contenedor.classList.add("noche");
        }
        suelo.style.animationDuration = 3 / gameVel + "s";
      }

      function GameOver() {
        Estrellarse();
        gameOver.style.display = "block";
      }

      function DetectarColision() {
        for (var i = 0; i < obstaculos.length; i++) {
          if (obstaculos[i].posX > dinoPosX + dino.clientWidth) {
            //EVADE
            break; //al estar en orden, no puede chocar con más
          } else {
            if (IsCollision(dino, obstaculos[i], 10, 30, 15, 20)) {
              GameOver();
            }
          }
        }
      }

      function IsCollision(
        a,
        b,
        paddingTop,
        paddingRight,
        paddingBottom,
        paddingLeft
      ) {
        var aRect = a.getBoundingClientRect();
        var bRect = b.getBoundingClientRect();

        return !(
          aRect.top + aRect.height - paddingBottom < bRect.top ||
          aRect.top + paddingTop > bRect.top + bRect.height ||
          aRect.left + aRect.width - paddingRight < bRect.left ||
          aRect.left + paddingLeft > bRect.left + bRect.width
        );
      }
    </script>
  </body>
</html>