Creating your own Dino game—similar to the famous offline browser game—is a fun and rewarding way to learn web development. In this complete guide, you’ll learn how to build a simple endless runner game using HTML, CSS, and JavaScript from scratch.
Whether you’re a beginner or someone improving your coding skills, this tutorial will walk you through everything step by step.
Here’s a visual idea of what you will build:
The Dino game is a simple endless runner where a dinosaur runs automatically, and the player must jump over obstacles like cacti. The game gets faster over time, increasing difficulty.
A popular version of this game appears in Google Chrome offline mode.
👉 Learn more about browser games: https://developer.mozilla.org/en-US/docs/Games
By the end of this tutorial, you will be able to:
Create a game layout using HTML
Style your game with CSS
Add game logic using JavaScript
Implement jumping mechanics
Detect collisions
Add score tracking
Increase game difficulty
Before starting, you should have basic knowledge of:
HTML
CSS
JavaScript
Create a new folder named:
dino-game
Inside it, create three files:
index.html
style.css
script.js
Open index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dino Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game">
<div id="dino"></div>
<div id="cactus"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Open style.css and write:
.game {
width: 600px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow: hidden;
}
#dino {
width: 40px;
height: 40px;
background: green;
position: relative;
top: 160px;
}
#cactus {
width: 20px;
height: 40px;
background: red;
position: relative;
top: 120px;
left: 580px;
animation: moveCactus 2s infinite linear;
}
@keyframes moveCactus {
0% { left: 580px; }
100% { left: -20px; }
}
.jump {
animation: jump 0.5s;
}
@keyframes jump {
0% { top: 160px; }
50% { top: 100px; }
100% { top: 160px; }
}
Now open script.js:
let dino = document.getElementById("dino");
let cactus = document.getElementById("cactus");
function jump() {
if (!dino.classList.contains("jump")) {
dino.classList.add("jump");
setTimeout(function () {
dino.classList.remove("jump");
}, 500);
}
}
document.addEventListener("keydown", function (event) {
jump();
});
Add this code below your script:
let isAlive = setInterval(function () {
let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) {
alert("Game Over!");
}
}, 10);
Add a score counter in HTML:
<h1 id="score">0</h1>
Then update JavaScript:
let score = 0;
setInterval(function () {
score++;
document.getElementById("score").innerText = score;
}, 100);
Modify cactus animation speed:
let speed = 2;
setInterval(function () {
speed -= 0.01;
cactus.style.animation = `moveCactus ${speed}s infinite linear`;
}, 1000);
Improve Game Over logic:
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) {
cactus.style.animation = "none";
alert("Game Over! Score: " + score);
location.reload();
}
For deeper understanding of JavaScript game development, check this:
👉 https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
Add sound effects 🎵
Use real dinosaur images 🦖
Add mobile touch support 📱
Create multiple obstacles
Add start/restart button
Building a Dino game is a great beginner project that teaches:
Game logic
Animation
Event handling
DOM manipulation
You now have a fully working endless runner game! From here, you can expand it into a more advanced game with better graphics and features.
Practice is the key to mastering game development. Start small, improve step by step, and soon you’ll be able to create more advanced games.