Build an Awesome "Catch the Circle" Game

Are you ready to dive into web development and create a fun, interactive game? In this blog post, we will guide you through building an exciting "Catch the Circle" game using HTML, CSS, and JavaScript. This game features a moving circle that you need to click to score points, with increasing difficulty and cool visual effects. Let's get started!

Project Overview

In this game, players will click on a circle that moves around a container. The game includes a start button, a countdown timer, and particle effects when the circle is clicked. The circle’s speed increases as the player progresses, making the game more challenging.

File Structure

index.html - The HTML file to structure the game.
styles.css - The CSS file to style the game.
script.js - The JavaScript file to add functionality and interactivity.

1. HTML (index.html)

This file sets up the structure of our game. It includes the game container, circle, score display, timer, and start button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Catch the Circle Game</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <button id="start-button">Start Game</button>
    <div id="game-container">
        <div id="circle"></div>
    </div>
    <div id="score">Score: 0</div>
    <div id="time-left">Time: 30s</div>
    <div id="message"></div>

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

2. CSS (styles.css)

This file handles the styling of our game, including the appearance of the game container, circle, and button. It also adds some cool visual effects.

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --background-color: #2c3e50;
    --text-color: #ecf0f1;
    --accent-color: #e74c3c;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--background-color);
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
}

#game-container {
    width: 400px;
    height: 400px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    display: none;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
}

#circle {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, var(--accent-color), #c0392b);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.7);
    transition: transform 0.1s ease-out;
}

#circle:hover {
    transform: scale(1.1);
}

#score, #time-left, #message {
    font-size: 24px;
    margin: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#start-button {
    padding: 12px 24px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#start-button:hover {
    background-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
}

3. JavaScript (script.js)

This file contains the game logic, including circle movement, scoring, difficulty adjustment, and the end game functionality.

document.addEventListener("DOMContentLoaded", () => {
  const circle = document.getElementById("circle");
  const gameContainer = document.getElementById("game-container");
  const scoreElement = document.getElementById("score");
  const timeLeftElement = document.getElementById("time-left");
  const messageElement = document.getElementById("message");
  const startButton = document.getElementById("start-button");

  let score = 0;
  let interval = 1000;
  let timer;
  let gameInterval;
  let gameStarted = false;
  let timeLeft = 30;

  function moveCircle() {
    const containerWidth = gameContainer.offsetWidth;
    const containerHeight = gameContainer.offsetHeight;
    const circleSize = circle.offsetWidth;

    const maxX = containerWidth - circleSize;
    const maxY = containerHeight - circleSize;

    const randomX = Math.random() * maxX;
    const randomY = Math.random() * maxY;

    circle.style.left = `${randomX}px`;
    circle.style.top = `${randomY}px`;
  }

  function handleClick(event) {
    score++;
    scoreElement.textContent = `Score: ${score}`;
    moveCircle();
    increaseDifficulty();
    createParticles(event);
  }

  function increaseDifficulty() {
    if (interval > 300) {
      interval -= 50;
      clearInterval(gameInterval);
      gameInterval = setInterval(moveCircle, interval);
    }
  }

  function endGame() {
    clearInterval(gameInterval);
    clearInterval(timer);
    messageElement.textContent = `Game Over! Your final score is ${score}.`;
    gameContainer.style.display = "none";
    startButton.style.display = "block";
    gameStarted = false;
  }

  function startGame() {
    score = 0;
    interval = 1000;
    timeLeft = 30;
    scoreElement.textContent = `Score: ${score}`;
    timeLeftElement.textContent = `Time: ${timeLeft}s`;
    messageElement.textContent = "";
    gameContainer.style.display = "block";
    startButton.style.display = "none";
    gameStarted = true;
    moveCircle();
    gameInterval = setInterval(moveCircle, interval);

    timer = setInterval(() => {
      timeLeft--;
      timeLeftElement.textContent = `Time: ${timeLeft}s`;
      if (timeLeft <= 0) {
        endGame();
      }
    }, 1000);
  }

  function createParticles(event) {
    const particleCount = 10;
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement("div");
      particle.className = "particle";
      gameContainer.appendChild(particle);

      const size = Math.random() * 5 + 5;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      const destinationX = (Math.random() - 0.5) * 200;
      const destinationY = (Math.random() - 0.5) * 200;

      const animation = particle.animate(
        [
          {
            transform: `translate(${
              event.clientX - gameContainer.offsetLeft
            }px, ${event.clientY - gameContainer.offsetTop}px)`,
            opacity: 1,
          },
          {
            transform: `translate(${
              event.clientX - gameContainer.offsetLeft + destinationX
            }px, ${event.clientY - gameContainer.offsetTop + destinationY}px)`,
            opacity: 0,
          },
        ],
        {
          duration: 1000,
          easing: "cubic-bezier(0, .9, .57, 1)",
          delay: Math.random() * 200,
        }
      );

      animation.onfinish = () => {
        particle.remove();
      };
    }
  }

  circle.addEventListener("click", handleClick);
  startButton.addEventListener("click", startGame);
});

How It Works

HTML: Structures the game elements including the game container, circle, score, timer, and start button.
CSS: Styles the game elements with modern design features like gradients, shadows, and animations for a polished look.
JavaScript: Manages the game logic, including circle movement, score tracking, difficulty adjustment, game timer, and particle effects on circle clicks.

Conclusion

This "Catch the Circle" game is a fun and interactive way to practice your web development skills. With the provided code, you can customize and expand the game to add new features or improve the existing ones.

Happy coding!