Creating a Dinosaur Game with HTML, CSS, and JavaScript

The Dinosaur Game, a simple yet addictive game found in the Google Chrome browser, can now be created from scratch using HTML, CSS, and JavaScript. In this tutorial, we will guide you through the process of building your own Dinosaur Game.

Getting Started

To start, you will need three essential files: index.html, style.css, and script.js. These files will house the structure, design, and functionality of your game.

HTML Structure (index.html)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="game">
        <div class="dinosaur" id="dino"></div>
        <div class="obstacle" id="obstacle"></div>
        <div class="ground"></div>
    </div>
    <button onclick="jump()">Jump</button>
    <script src="script.js"></script>
</body>
</html>

In the HTML structure, we have created a game container that holds the dinosaur, obstacles, and the ground. We’ve also included a “Jump” button, which will make the dinosaur jump.

Styling the Game (style.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f7f7f7;
}

.game {
    position: relative;
    width: 400px;
    height: 200px;
    background-color: #f7f7f7;
    border: 2px solid #000;
}

.dinosaur {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 40px;
    height: 60px;
    background-color: #666;
}

.obstacle {
    position: absolute;
    bottom: 0;
    left: 400px;
    width: 20px;
    height: 40px;
    background-color: #666;
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background-color: #333;
}

The CSS file provides the game’s visual elements, defining the appearance and layout. It creates a game window with a dinosaur, obstacles, and a ground. You can customize the colors, sizes, and layout as you like.

Adding Interactivity (script.js)

const dino = document.getElementById("dino");
const obstacle = document.getElementById("obstacle");

function jump() {
    if (dino.classList != "animate") {
        dino.classList.add("animate");
    }
    setTimeout(function () {
        dino.classList.remove("animate");
    }, 500);
}

let isAlive = setInterval(function () {
    let dinoTop = parseInt(
        window.getComputedStyle(dino).getPropertyValue("top")
    );
    let obstacleLeft = parseInt(
        window.getComputedStyle(obstacle).getPropertyValue("left")
    );

    if (obstacleLeft < 40 && obstacleLeft > 0 && dinoTop >= 130) {
        alert("Game Over!");
    }
}, 10);

In the JavaScript file, we define the game’s functionality. The jump function allows the dinosaur to jump when the “Jump” button is pressed. We also check for collisions with obstacles, and if a collision occurs, the game displays a “Game Over!” alert.

Conclusion

Creating your own Dinosaur Game using HTML, CSS, and JavaScript is a fun and educational project. You can further enhance the game by adding more features, like scoring and increasing the difficulty level. Feel free to experiment with the design and functionality to make the game truly your own.

With this tutorial, you have taken the first step in becoming a game developer. Have fun building and playing your Dinosaur Game!

Tagged game maker