How to Build a Bounce Ball with HTML and JavaScript ?

Last Updated : 08 Jan, 2024

A bouncing ball can be created by using HTML, CSS, and JavaScript and performing some bouncing operations on that ball. You can see a related article on how to make smooth bounce animation using CSS.

Approach

Canvas Setup:
- Create a canvas element and set its width and height to match the window dimensions.
Context Initialization:
- Get the 2D rendering context of the canvas using getContext('2d').
Circle Initialization:
- Initialize the circle’s position (x and y), speed (vx and vy), and radius.
Animation Loop:
- Implement an animation loop using requestAnimationFrame.
- Clear the canvas for each frame using clearRect.
Circle Movement and Bouncing:
- we will assign 4 variables, 2 for the created circle(ball) coordinates and another two for the respective speed of the bouncing ball.
- The radius variable is used for the ball’s radius.
- We also need to clear the canvas area to do so we will use the clearReact() function.
- All the bouncing and coordination will be decided by the math.random() function.

Example: Below is the implementation of above explained approach.

Javascript

let canvas = document.querySelector("canvas");
 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
let l = canvas.getContext('2d');
 
// x and y are the coordinates of the circle
// vx and vy are the respective speeds
let x = Math.floor(Math.random() * innerWidth);
let y = Math.floor(Math.random() * innerHeight);
let vx = Math.floor(Math.random() * 2);
let vy = Math.floor(Math.random() * 4);
let radius = 20;
 
move();
 
// This function will do the animation
function move() {
    requestAnimationFrame(move);
 
    // It clears the specified pixels within
    // the given rectangle
    l.clearRect(0, 0, innerWidth, innerHeight);
 
    // Creating a circle
    l.beginPath();
    l.strokeStyle = "black";
    l.arc(x, y, radius, 0, Math.PI * 2, false);
    l.stroke();
 
    // Conditions so that the ball bounces
    // from the edges
    if (radius + x > innerWidth)
        vx = 0 - vx;
 
    if (x - radius < 0)
        vx = 0 - vx;
 
    if (y + radius > innerHeight)
        vy = 0 - vy;
 
    if (y - radius < 0)
        vy = 0 - vy;
 
    x = x + vx;
    y = y + vy;
 
}

html

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        Bouncing Ball!!
    </title>
    <style>
        h1 {
            color: green;
        }
         
        canvas {
            background-color: #F08080;
            width: 600px;
            height: 400px;
            position: absolute;
            top: 20%;
            left: 20%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Bouncing ball using JavaScript</h3>
        <canvas>
        </canvas>
    </center>
</body>
 
</html>