Create Your Own Chrome Dino Game with HTML, CSS, and JavaScript

Have you ever wanted to create your own version of the Chrome Dino game? With just a few lines of HTML, CSS, and JavaScript, you can bring this iconic game to life. Here's a step-by-step guide to building a simple yet fun version of the Dino game.

HTML

Start by creating an HTML file to define the game structure. You'll need a container for the game, a <div> for the dinosaur, another <div> for the cactus, and a score display.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Dino Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <div id="dino" class="dino"></div>
        <div id="cactus" class="cactus"></div>
        <div id="score">Score: 0</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

Next, style the game elements using CSS. Define the appearance and animation of the dinosaur and cactus.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f7f7f7;
    font-family: Arial, sans-serif;
}

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

.dino {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 40px;
    height: 40px;
    background-color: #333;
}

.cactus {
    position: absolute;
    bottom: 0;
    right: -40px;
    width: 20px;
    height: 40px;
    background-color: #0f0;
    animation: moveCactus 2s linear infinite;
}

#score {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
}

@keyframes moveCactus {
    from {
        right: -40px;
    }
    to {
        right: 640px;
    }
}

JavaScript

Finally, add JavaScript to handle the game logic, including jumping, collision detection, and score updates.

let dino = document.getElementById('dino');
let cactus = document.getElementById('cactus');
let scoreDisplay = document.getElementById('score');
let isJumping = false;
let score = 0;

function jump() {
    if (isJumping) return;
    isJumping = true;
    let upInterval = setInterval(() => {
        if (parseInt(window.getComputedStyle(dino).bottom) >= 150) {
            clearInterval(upInterval);
            let downInterval = setInterval(() => {
                if (parseInt(window.getComputedStyle(dino).bottom) <= 0) {
                    clearInterval(downInterval);
                    isJumping = false;
                }
                dino.style.bottom = `${parseInt(window.getComputedStyle(dino).bottom) - 5}px`;
            }, 20);
        }
        dino.style.bottom = `${parseInt(window.getComputedStyle(dino).bottom) + 5}px`;
    }, 20);
}

function checkCollision() {
    let dinoBottom = parseInt(window.getComputedStyle(dino).bottom);
    let cactusLeft = parseInt(window.getComputedStyle(cactus).left);

    if (cactusLeft > 0 && cactusLeft < 40 && dinoBottom < 40) {
        alert('Game Over');
        cactus.style.animation = 'none';
        cactus.style.display = 'none';
    }
}

function updateScore() {
    score++;
    scoreDisplay.innerText = `Score: ${score}`;
}

document.addEventListener('keydown', function(event) {
    if (event.key === ' ') {
        jump();
    }
});

setInterval(checkCollision, 10);
setInterval(updateScore, 100);

This code creates a simple 2D version of the Chrome Dino game. The dinosaur jumps when you press the space key, and the game ends if the dinosaur collides with the cactus. Enjoy creating and playing your very own Chrome Dino game!

Sky Code82

Search This Blog