Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
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
How to Build a Bounce Ball with HTML and JavaScript?
We will start by creating a canvas element in our HTML document using the canvas tag. Next, we will use JavaScript to draw a circle on the canvas and set its initial position and velocity. Finally, we can use JavaScript to continuously update the position of the circle based on its velocity and add collision detection to change the velocity when it hits the edges of the canvas.
Approach
To build a bounce ball using HTML and JavaScript, you will need to do the following −
Create an HTML file with a canvas element on which the ball will be drawn.
Use JavaScript to create the ball as a shape (e.g. a circle) on the canvas.
Use JavaScript to move the ball across the canvas, bouncing it off the edges when it reaches them.
Use JavaScript to detect when the ball hits the edges and change its direction accordingly.
Use CSS to style the ball and the canvas as desired.
Example
Here is a working example of a bounce ball built using HTML + CSS and plain JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball with JavaScript</title>
<style>
#ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 25px;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
const ball = document.getElementById("ball");
let x = 0;
let y = 0;
let xSpeed = 5;
let ySpeed = 5;
function animate() {
x += xSpeed;
y += ySpeed;
if (x + 50 > window.innerWidth || x < 0) {
xSpeed = -xSpeed;
}
if (y + 50 > window.innerHeight || y < 0) {
ySpeed = -ySpeed;
}
ball.style.left = x + "px";
ball.style.top = y + "px";
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Explanation
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.
In the JavaScript file, we first grab the ball element from the HTML using document.getElementById("ball").
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.
4K+ Views
