Home > Article > Web Front-end > How to build a bouncing ball using HTML and JavaScript?

How to build a bouncing ball using HTML and JavaScript?

PHPzforward: 2023-09-01 18:49:07746browse

We will first create a canvas element in the HTML document using the canvas tag. Next, we'll 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 circle's position based on its speed, and add collision detection to change the speed when the circle hits the edge of the canvas.

method

To build a bouncing ball using HTML and JavaScript you need to do the following -

Create an HTML file with a canvas element on which the ball will be drawn.
Use JavaScript to create a spherical shape (such as a circle) on the canvas.
Use JavaScript to move the ball onto the canvas and make it bounce when it reaches the edge.
Use JavaScript to detect when the ball hits the edge and change its direction accordingly.
Use CSS to style the ball and canvas as needed.

The Chinese translation of

Example

is:

Example

This is a working example of a bouncing ball built using HTML CSS and pure 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>

The Chinese translation of

Explanation

is:

Explanation

The HTML file creates a div element with the id "ball", which will be used as the bouncing ball.
The CSS file sets the ball as a red circle with a width and height of 50 pixels.
In the JavaScript file, we first use document.getElementById("ball") to get the ball element from the HTML.
Then we set some variables for the ball's x and y positions and x and y velocities.
In the animate() function, we update the ball’s x and y positions by adding the x and y velocities to the ball’s position.
We also check if the ball hits the edge of the screen, if so we invert the x or y velocity so the ball bounces back.
Finally, we set the left and top CSS properties of the ball to the new x and y positions, and use requestAnimationFrame(animate) to continuously call the animate function to create the animation effect of the bouncing ball.

This is just a basic example, you can add more features such as changing the size of the ball, color, setting the initial position of the ball or adding more balls.

The above is the detailed content of How to build a bouncing ball using HTML and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to set horizontal header for table?Next article：How to set horizontal header for table?

See more

How to build a bouncing ball using HTML and JavaScript?

method

Example

Example

Explanation

Explanation

Related articles