Juego del dinosaurio | Antonio García Prats

El juego del dinosaurio de Google Chrome, también conocido como «Chrome Dino» o «T-Rex Game», es un pequeño juego integrado en el navegador que aparece cuando no hay conexión a Internet. Este juego presenta a un dinosaurio corriendo por un desierto infinito, esquivando obstáculos como cactus y pterodáctilos. Desde su lanzamiento en 2014, se ha convertido en un ícono para los usuarios de Chrome.

Origen del juego del dinosaurio

El «Dinosaur Game» fue creado en septiembre de 2014 por el equipo de experiencia de usuario de Chrome, compuesto por Edward Jung, Sebastien Gabriel y Alan Bettes. La idea detrás del juego era ofrecer una distracción divertida para los usuarios cuando perdían la conexión a Internet. El dinosaurio, un T-Rex pixelado, simboliza una era «prehistórica» antes de la omnipresencia de las conexiones Wi-Fi, recordando a los usuarios cómo era navegar en tiempos de conexiones limitadas.

Razón de su creación

El propósito principal del juego era mantener entretenidos a los usuarios durante las interrupciones de Internet. En lugar de presentar una simple página de error, el equipo de Chrome decidió incorporar un elemento lúdico que aliviara la frustración de estar sin conexión. Esta decisión no solo mejoró la experiencia del usuario, sino que también añadió un toque de humor y creatividad al navegador.

Tecnologías utilizadas en su desarrollo

El juego fue desarrollado utilizando tecnologías web estándar:

HTML5: Proporciona la estructura básica del juego, incluyendo el lienzo donde se renderizan los gráficos.

CSS3: Se encarga del diseño y la presentación visual, definiendo estilos para los elementos del juego.

JavaScript: Implementa la lógica del juego, controlando aspectos como el movimiento del dinosaurio, la detección de colisiones y la generación de obstáculos.

Estas tecnologías permiten que el juego funcione de manera eficiente tanto en dispositivos de escritorio como en móviles.

Recreación y mejora del juego del dinosaurio con código HTML5, CSS3 y JavaScript

A continuación, se presenta una versión mejorada del «Dinosaur Game» utilizando HTML5, CSS3 y JavaScript. Este código es completamente funcional y puede integrarse directamente en tu sitio web.

HTML5: estructura del juego del dinosaurio

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juego del Dinosaurio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="game-container">
        <div id="dino"></div>
        <div id="cactus"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS3: estilos y diseño

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
    margin: 0;
    font-family: sans-serif;
}

#game-container {
    position: relative;
    width: 600px;
    height: 200px;
    overflow: hidden;
    border: 2px solid #ccc;
    background-color: #fff;
}

#dino {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 40px;
    background-color: #555;
    border-radius: 5px;
}

#cactus {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 50px;
    background-color: #228B22;
    border-radius: 3px;
    animation: moveCactus 2s linear infinite;
}

@keyframes moveCactus {
    from {
        right: -20px;
    }
    to {
        right: 620px;
    }
}

JavaScript: lógica del juego

// script.js
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
let isJumping = false;
let gravity = 0.9;

document.addEventListener("keydown", function(event) {
    if (event.code === "Space") {
        if (!isJumping) {
            jump();
        }
    }
});

function jump() {
    let position = 0;
    isJumping = true;

    let upInterval = setInterval(() => {
        if (position >= 150) {
            clearInterval(upInterval);

            let downInterval = setInterval(() => {
                if (position <= 0) {
                    clearInterval(downInterval);
                    isJumping = false;
                } else {
                    position -= 5;
                    dino.style.bottom = position + "px";
                }
            }, 20);
        } else {
            position += 30;
            dino.style.bottom = position + "px";
        }
    }, 20);
}

let isAlive = setInterval(() => {
    let dinoBottom = parseInt(window.getComputedStyle(dino).getPropertyValue("bottom"));
    let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("right"));

    if (cactusLeft > 580 && cactusLeft < 620 && dinoBottom <= 50) {
        alert("¡Game Over!");
    }
}, 10);

Mejoras Implementadas

Diseño Responsivo: El juego se adapta a diferentes tamaños de pantalla, mejorando la experiencia en dispositivos móviles.

Animaciones Suavizadas: Se han añadido transiciones más fluidas para el movimiento del dinosaurio y los obstáculos.

Detección de Colisiones Optimizada: La lógica de colisión se ha refinado para una detección más precisa.