Have you ever wanted to learn how to make HTML5 games but didn’t know where to start? Well, you’re in for a treat! Today, we’ll guide you through building a simple and fun Dino Runner Game using HTML5, CSS3, and a sprinkle of JavaScript.
This beginner-friendly guide will not only help you understand game development basics but also show you how to work with images, animations, and collision detection—all while keeping it lightweight and fun.
Why Build an HTML5 Game?
HTML5 is a fantastic tool for creating simple, browser-based games. Whether you’re a beginner or a seasoned developer, working with HTML5 games can:
- Boost your coding skills.
- Help you understand the interplay between HTML, CSS, and JavaScript.
- Provide a fun project to share with friends or showcase in your portfolio.
The Dino Runner Game Overview
Inspired by the Chrome Dino Game (that cute little offline runner), our version features:
- A dino character that jumps.
- Tree obstacles the dino must avoid.
- A Game Over screen when the dino collides with a tree.
Step 1: Set Up the HTML Structure
The HTML creates the skeleton of your game. Copy and paste this code into a file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dino Runner Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<div class="dino"></div>
<div class="tree"></div>
<div class="ground"></div>
<h1 class="game-over">Game Over!</h1>
</div>
<script src="script.js"></script>
</body>
</html>What’s Happening Here:
div.dino: Represents the dino.div.tree: Represents the tree obstacles.h1.game-over: Displays the “Game Over” message when the dino collides with a tree.
Step 2: Style the Game with CSS
Now let’s bring the game to life visually. Create a file called style.css and add the following:
/* Reset and Basic Setup */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #f4e3c1);
overflow: hidden;
}
.game-container {
position: relative;
width: 80%;
height: 200px;
border: 2px solid #333;
background-color: #fff;
overflow: hidden;
}
/* Dino */
.dino {
position: absolute;
bottom: 10px;
left: 50px;
width: 50px;
height: 50px;
background: url('https://img.icons8.com/color/100/000000/tyrannosaurus-rex.png') no-repeat center/contain;
z-index: 10;
}
/* Tree */
.tree {
position: absolute;
bottom: 10px;
right: -50px;
width: 40px;
height: 60px;
background: url('https://img.icons8.com/ios-filled/100/000000/tree.png') no-repeat center/contain;
animation: move-tree 2s linear infinite;
}
@keyframes move-tree {
0% { right: -50px; }
100% { right: 100%; }
}
/* Ground */
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 10px;
background-color: #333;
}
/* Game Over */
.game-over {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: red;
}The CDN might not work, so use your own images.
Step 3: Add Game Logic with JavaScript
Create a file called script.js and add the following:
const dino = document.querySelector('.dino');
const tree = document.querySelector('.tree');
const gameOverText = document.querySelector('.game-over');
let isJumping = false;
let isGameOver = false;
// Dino jump function
function jump() {
if (isJumping) return; // Prevent multiple jumps
isJumping = true;
let position = 0;
const upInterval = setInterval(() => {
if (position >= 150) {
clearInterval(upInterval);
const downInterval = setInterval(() => {
if (position <= 0) {
clearInterval(downInterval);
isJumping = false;
}
position -= 10;
dino.style.bottom = position + 'px';
}, 20);
}
position += 10;
dino.style.bottom = position + 'px';
}, 20);
}
// Collision detection
function checkCollision() {
const dinoRect = dino.getBoundingClientRect();
const treeRect = tree.getBoundingClientRect();
if (
dinoRect.right > treeRect.left &&
dinoRect.left < treeRect.right &&
dinoRect.bottom > treeRect.top
) {
isGameOver = true;
tree.style.animation = 'none';
tree.style.right = treeRect.right + 'px';
gameOverText.style.display = 'block';
}
}
// Listen for key presses
document.addEventListener('keydown', (event) => {
if (event.key === ' ' || event.key === 'ArrowUp') {
if (!isGameOver) jump();
}
});
// Run collision detection continuously
setInterval(() => {
if (!isGameOver) checkCollision();
}, 20);
How It Works
Dino Jump:
- When you press the spacebar or ArrowUp key, the dino jumps.
- JavaScript controls the dino’s movement with
setIntervalto make it smooth.
Obstacle Animation:
- The tree moves from right to left using a CSS animation.
Collision Detection:
- Using
getBoundingClientRect(), we check if the dino and tree overlap. If they do, the game stops, and the “Game Over” message is displayed.
Step 4: Play the Game
- Save the files (
index.html,style.css, andscript.js) in the same directory. - Open
index.htmlin your browser. - Use the spacebar or ArrowUp key to jump and avoid the trees.
- Enjoy the fun!
Step 5: Customize Your Game
Want to make it even more exciting? Here are some ideas:
- Add more tree types or obstacles.
- Introduce a scoring system to track how long you survive.
- Use background music or sound effects to enhance the experience.
Final Thoughts
Congratulations! 🎉 You’ve just learned how to make HTML5 games by creating your own Dino Runner Game. Not only is this a great project to flex your coding muscles, but it’s also a stepping stone to more complex games.
So, what are you waiting for? Share your creation, tweak it to make it your own, and let the world know about your HTML5 game-making skills!
Have fun coding, and stay tuned for more awesome tutorials! 🚀
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
