JavaScript can do more than build websites—it can also power fun games! In this guide, you’ll learn how to build a simple browser-based game using plain JavaScript, HTML, and CSS.
We’ll create a click-based game called "Catch the Box". A box moves around the screen, and your goal is to click it as many times as possible before time runs out.
A basic text editor (like VS Code or Notepad++)
A modern browser (like Chrome or Firefox)
Basic knowledge of HTML, CSS, and JavaScript
Create a new folder for your project. Inside, make three files:
index.html
style.css
script.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Catch the Box Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Catch the Box!</h1>
<p>Score: <span id="score">0</span></p>
<div id="game-area">
<div id="box"></div>
</div>
<button id="start">Start Game</button>
<script src="script.js"></script>
</body>
</html>
/* style.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 30px;
}
#game-area {
width: 500px;
height: 400px;
border: 2px solid #000;
margin: 20px auto;
position: relative;
background-color: #f0f0f0;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
display: none;
cursor: pointer;
}
button {
padding: 10px 20px;
font-size: 16px;
}
// script.js
const box = document.getElementById("box");
const scoreDisplay = document.getElementById("score");
const startButton = document.getElementById("start");
let score = 0;
let gameTime = 10000; // 10 seconds
let gameInterval;
function getRandomPosition() {
const gameArea = document.getElementById("game-area");
const maxX = gameArea.clientWidth - box.offsetWidth;
const maxY = gameArea.clientHeight - box.offsetHeight;
const x = Math.floor(Math.random() * maxX);
const y = Math.floor(Math.random() * maxY);
return { x, y };
}
function moveBox() {
const pos = getRandomPosition();
box.style.left = pos.x + "px";
box.style.top = pos.y + "px";
}
function startGame() {
score = 0;
scoreDisplay.textContent = score;
box.style.display = "block";
moveBox();
gameInterval = setInterval(() => {
moveBox();
}, 700); // Move every 700ms
setTimeout(() => {
endGame();
}, gameTime);
}
function endGame() {
clearInterval(gameInterval);
box.style.display = "none";
alert("Time’s up! Your final score is: " + score);
}
box.addEventListener("click", () => {
score++;
scoreDisplay.textContent = score;
moveBox();
});
startButton.addEventListener("click", startGame);
The HTML lays out the score display, game area, and box.
The CSS styles the game area and makes it look clean.
The JavaScript handles:
Random movement of the box
Score updates on clicks
Game timing and reset
Want to make it better? Try these ideas:
Add a countdown timer
Change box color every move
Show high scores
Make it mobile-friendly
This simple game shows how JavaScript can bring your ideas to life. You don’t need a game engine—just a bit of logic and creativity. Now that you know the basics, try making your own mini games.
Thank you for reading. If you'd like to learn more tutorials, visit Flatcoding.
Did you like this post? Tell us
Leave a comment
Log in with your itch.io account to leave a comment.