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')
.
-
Get the 2D rendering context of the canvas using
-
Circle Initialization:
-
Initialize the circle’s position (
x
andy
), speed (vx
andvy
), and radius.
-
Initialize the circle’s position (
-
Animation Loop:
-
Implement an animation loop using
requestAnimationFrame
. -
Clear the canvas for each frame using
clearRect
.
-
Implement an animation loop using
-
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 >
|
Output: Click here to see live code output