Build a Simple JavaScript Game – Catch The Box (Step-by-Step)

If you are learning JavaScript and want to build something fun, interactive, and portfolio-worthy, then this small game project is perfect for you.

In this post, we will create a “Catch The Box” game using HTML, CSS, and JavaScript.
This project helps beginners understand DOM manipulation, events, timers, and random positioning in a very practical way.

Game Concept

The idea of this game is very simple:

A small box appears inside a game area
The box moves to a random position every second
When the player clicks the box, the score increases
The game runs for 30 seconds
After time is over, the final score is shown

This project is beginner-friendly and can be added to your portfolio or resume.

📁 Project Structure

We will use three separate files:

index.html   → Structure of the game
style.css    → Design & layout
script.js    → Game logic

<!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>

  <div class="info">
    <p>Score: <span id="score">0</span></p>
    <p>Time: <span id="time">30</span>s</p>
  </div>

  <div class="game-area">
    <div id="box"></div>
  </div>

  <button id="startBtn">Start Game</button>

  <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  text-align: center;
}

.info {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.game-area {
  width: 400px;
  height: 400px;
  background: white;
  margin: 30px auto;
  position: relative;
  border-radius: 10px;
}

#box {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  cursor: pointer;
  border-radius: 8px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

const box = document.getElementById("box");
const scoreText = document.getElementById("score");
const timeText = document.getElementById("time");
const startBtn = document.getElementById("startBtn");
const gameArea = document.querySelector(".game-area");

let score = 0;
let timeLeft = 30;
let gameInterval;
let timerInterval;

function moveBox() {
  const areaWidth = gameArea.clientWidth - 50;
  const areaHeight = gameArea.clientHeight - 50;

  const x = Math.random() * areaWidth;
  const y = Math.random() * areaHeight;

  box.style.left = x + "px";
  box.style.top = y + "px";
}

box.addEventListener("click", () => {
  score++;
  scoreText.textContent = score;
  moveBox();
});

function startGame() {
  score = 0;
  timeLeft = 30;

  scoreText.textContent = score;
  timeText.textContent = timeLeft;

  moveBox();

  gameInterval = setInterval(moveBox, 1000);

  timerInterval = setInterval(() => {
    timeLeft--;
    timeText.textContent = timeLeft;

    if (timeLeft === 0) {
      clearInterval(gameInterval);
      clearInterval(timerInterval);
      alert("Game Over! Your Score: " + score);
    }
  }, 1000);
}

startBtn.addEventListener("click", startGame);