Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Build a Bounce Ball with HTML and JavaScript ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 25 Jan, 2023
Improve Article
Save Article

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.

This article will be divided into two portions, 1st portion we will decide the area where the bouncing ball will perform bouncing, basically, we will create a canvas where bouncing will be performed. 2nd portion will design the bouncing ball and add some bouncing functionality to it.


 

HTML & CSS: HTML and CSS code is used to create a canvas area where the ball will bounce. We will use a canvas tag and by using JavaScript we will struct the circle for the ball inside of that canvas. And the canvas area and background color of the canvas area is defined by the CSS.

JavaScript: It is the core part of this article where we will struct the ball and perform the bouncing task. 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:

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>

Javascript




<script>
    var canvas = document.querySelector("canvas");
  
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  
    var l = canvas.getContext('2d');
  
    // x and y are the coordinates of the circle
    // vx and vy are the respective speeds
    var x = Math.floor(Math.random() * innerWidth);
    var y = Math.floor(Math.random() * innerHeight);
    var vx = Math.floor(Math.random() * 2);
    var vy = Math.floor(Math.random() * 4);
    var 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;
  
    }
</script>

Output: Click here to see live code output


My Personal Notes arrow_drop_up

Start Your Coding Journey Now!