Back To Tutorials

Bouncing Ball Animation in JavaScript

Beginnerchallenge

In this challenge, you will create a simple animation of a ball bouncing within a rectangular area. The ball will move diagonally, and when it hits the edges of the container, it will bounce back in the opposite direction. This challenge will help you understand JavaScript animations and DOM manipulation.

Objective:

  • Create an animated ball that moves and bounces within the confines of a container using JavaScript and CSS.

Requirements:

  1. Implement a ball that moves inside a container.
  2. Detect collisions with the container's edges and make the ball bounce back.
  3. Use requestAnimationFrame() to create a smooth animation.
  4. Style the ball and the container using CSS.
  5. The animation should continuously run.

Steps:

  1. Create HTML Structure:

    • Create a div for the container and another div for the ball.

  2. Style the Ball and Container:

    • Use CSS to style the container with fixed dimensions and the ball with a circular shape.

  3. Implement JavaScript for Movement:

    • Use JavaScript to control the ball’s movement by updating its position.
    • Detect when the ball hits the container's edges and change the direction of movement (bounce).

  4. Use requestAnimationFrame for Smooth Animation:

    • Implement the animation loop using requestAnimationFrame() for smoother rendering.

  5. Test the Animation:

    • Ensure the ball bounces off all edges correctly and the animation runs smoothly.

Resources:

Level: Beginner

This challenge introduces the concept of simple animations in JavaScript using requestAnimationFrame and collision detection. It’s suitable for beginners looking to learn basic animation techniques.

Solution:

Here’s a possible solution for the Bouncing Ball Animation in JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouncing Ball Animation</title>
  <style>
    /* Container style */
    #container {
      width: 500px;
      height: 300px;
      border: 2px solid black;
      position: relative;
      overflow: hidden;
    }

    /* Ball style */
    #ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <!-- Container and Ball -->
  <div id="container">
    <div id="ball"></div>
  </div>

  <script>
    const ball = document.getElementById('ball');
    const container = document.getElementById('container');

    // Set initial position and speed of the ball
    let posX = 0;
    let posY = 0;
    let speedX = 2;  // Horizontal speed
    let speedY = 2;  // Vertical speed
    const ballSize = 50;  // Ball size
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;

    // Function to animate the ball
    function animateBall() {
      // Update ball position
      posX += speedX;
      posY += speedY;

      // Collision detection (bounce off the edges)
      if (posX + ballSize > containerWidth || posX < 0) {
        speedX = -speedX;  // Reverse horizontal direction
      }
      if (posY + ballSize > containerHeight || posY < 0) {
        speedY = -speedY;  // Reverse vertical direction
      }

      // Apply the new position to the ball
      ball.style.left = posX + 'px';
      ball.style.top = posY + 'px';

      // Request the next animation frame
      requestAnimationFrame(animateBall);
    }

    // Start the animation
    animateBall();
  </script>
</body>
</html>

Explanation:

  • HTML Structure:

    • The container (div) holds the ball, and the ball is an absolutely positioned div inside the container.

  • CSS Styling:

    • The ball is styled as a red circle using border-radius: 50%, and the container is given fixed dimensions with overflow hidden.

  • JavaScript:

    • JavaScript moves the ball by updating its left and top position.
    • Collision detection is used to bounce the ball when it hits the container’s edges, by reversing the direction of movement (speedX and speedY).
    • The requestAnimationFrame() method is used to ensure smooth animation performance.

  • Edge Cases:

    • The animation handles cases where the ball might hit the edges of the container and ensures it bounces back without leaving the visible area.

  • Time Complexity:

    • The animation runs in constant time per frame, meaning the time complexity for each frame update is O(1).