- Trending Categories
- Data Structure
- Operating System
- MS Excel
- C Programming
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create an HTML file with a canvas element on which the ball will be drawn.
Use CSS to style the ball and the canvas as desired.
The HTML file creates a div element with an id of “ball”, which will be used as the bouncing ball.
The CSS file styles the ball to be a red, circular shape with a width and height of 50px.
We then set up some variables for the x and y position of the ball, as well as the x and y speed.
In the animate() function, we update the x and y position of the ball by adding the x and y speed to it.
We also check if the ball has hit the edge of the screen, and if so, we reverse the x or y speed so that it bounces back.
Finally, we set the left and top CSS properties of the ball to the new x and y position, and use requestAnimationFrame(animate) to continuously call the animate function, creating the animation effect of the bouncing ball.
This is just a basic example, you could add more features like changing the size of the ball, color, setting the initial position of the ball, or adding more balls.
Kickstart Your Career
Get certified by completing the courseGet Started