Ready to jump into the world of JavaScript game development? In this guide, we’ll walk through building a simple jump game using plain JavaScript, HTML, and CSS. It’s going to be fun, beginner-friendly, and full of mini wins. Perfect for anyone wanting a taste of gamedev!
TL;DR
All Heading
This guide teaches you how to make a simple jumping game using HTML, CSS, and JavaScript. You’ll learn how to create a basic character and make it jump using arrow keys. We’ll also implement some simple collision and movement logic. If you’ve never made a game before, this is a great place to start!
What We’re Trying to Build
We’re making a small game where a block (our “hero”) jumps over obstacles. The game will be played in the browser using just your keyboard.
All you need is a code editor, a web browser, and a few minutes of coding magic!
Step 1: Setting Up the HTML
Start with the basic HTML structure. This is the stage where all the action happens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jump Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<div id="player"></div>
<div id="obstacle"></div>
</div>
<script src="script.js"></script>
</body>
</html>
We have two main parts here:
- player – This is the block that jumps
- obstacle – This comes toward the player and must be jumped over
Step 2: Add Some Style with CSS
Let’s add style so the game doesn’t look like a pile of words. Save this as style.css.
body {
margin: 0;
background-color: #f0f0f0;
}
.game-container {
width: 800px;
height: 300px;
margin: 50px auto;
background-color: #aaddff;
position: relative;
overflow: hidden;
border: 2px solid #000;
}
#player {
width: 50px;
height: 50px;
background-color: #ff5733;
position: absolute;
bottom: 0;
left: 100px;
}
#obstacle {
width: 50px;
height: 50px;
background-color: #4caf50;
position: absolute;
bottom: 0;
right: 0;
animation: moveObstacle 2s linear infinite;
}
@keyframes moveObstacle {
0% { right: -50px; }
100% { right: 850px; }
}
Now you’ll see a red block (our hero) and a green block (an approaching obstacle). The green block moves from right to left using a CSS animation.
Step 3: Make the Player Jump with JavaScript
This is where the fun begins. Time to add some logic! Save this as script.js.
const player = document.getElementById("player");
let isJumping = false;
function jump() {
if (isJumping) return;
isJumping = true;
let upInterval = setInterval(() => {
if (player.offsetTop <= 150) {
clearInterval(upInterval);
let downInterval = setInterval(() => {
if (player.offsetTop >= 250) {
clearInterval(downInterval);
isJumping = false;
} else {
player.style.top = player.offsetTop + 5 + "px";
}
}, 20);
} else {
player.style.top = player.offsetTop - 5 + "px";
}
}, 20);
}
document.body.addEventListener("keydown", function(e) {
if (e.code === "Space" || e.code === "ArrowUp") {
jump();
}
});
The logic works like this:
- When the player presses the spacebar or up arrow, the jump function starts.
- The red block goes up, then comes back down using setInterval.
- We use offsetTop to move the player smoothly up and down.
Step 4: Keep the Player Grounded
To keep things smooth, update the CSS to give our player a starting top position.
#player {
...
top: 250px;
}
You can also set the obstacle speed by changing the animation-duration. Give it more seconds to slow it down, or fewer to make it more challenging!
Step 5: Add Collision Logic
What happens if our hero doesn’t jump? Game over! Let’s add a bit of logic to detect that.
const obstacle = document.getElementById("obstacle");
let checkCollision = setInterval(() => {
const playerTop = player.offsetTop;
const obstacleLeft = obstacle.offsetLeft;
if (obstacleLeft < 150 && obstacleLeft > 50 && playerTop >= 250) {
alert("Game Over! Try again.");
location.reload();
}
}, 10);
This code checks if the obstacle is close to the player and if the player is on the ground. If so, it’s considered a “hit” and restarts the game.
Step 6: Polish and Improve
Now that we have the basics, you can:
- Add a score counter for how long you survive
- Play a sound when you jump or collide
- Use images instead of blocks for graphics
- Create multiple obstacles for added challenge
This is just the beginning. With just a few lines of CSS and JavaScript, you’ve built a tiny action-packed game!
Helpful Tips
- Use console.log() to debug if something isn’t working
- For mobile support, add a tap-to-jump feature
- Wrap code in functions to keep things clean and reusable
- Explore requestAnimationFrame for smoother movement
What’s Next?
You’re now officially a game developer! Sort of.
If you enjoyed this, next up could be:
- Adding levels
- Creating a landing screen and menu
- Publishing the game using GitHub Pages
The skills you’ve learned in this simple jump game apply to many bigger games. You’re on your way!
Final Thoughts
Making games with JavaScript can be super rewarding. It’s interactive, visual, and just a little bit addictive.
And the best part? You made it with tools you probably already have on your computer!
Happy coding and happy jumping!
Recent Comments