JavaScript How to Create a Bouncing Ball Animation with Vanilla JavaScript and moving Page elements

JavaScript How to Create a Bouncing Ball Animation with Vanilla JavaScript and moving Page elements Course content web development and web design courses with coding examples and source code for the lesson content. Source Code is available within my Github account. Lessons posted are designed to help students learn more about a specific topic related to modern web development and applying code. Laurence Svekis is a professional top selling course author having instructed over 1 Million students both online and in person. Laurence Svekis is a Google Developer Expert specializing in Google Workspace automation using Google Apps Script Code.

JavaScript How to Create a Bouncing Ball Animation with Vanilla JavaScript and moving Page elements.  This exercise will create a bouncing red ball, within a div.  Movement is done by selecting the page element, and updating the style property with JavaScript code.   The updated position of the ball is tracked within a variable object that contains all the values needed for the ball.   Use a request animation frame to create a smooth animation on the screen.  Once the ball position reaches any of the container element boundaries it will reverse direction on the axis that the boundary was reached.   This ensures a continued movement within the boundaries.   Speed and ball size can also be dynamically adjusted within the ball object settings.

1. Create an HTML document with one page element div, with the class of main.  

<div class=”main”></div>

2. Select the page element into a variable named main.

const main = document.querySelector(‘.main’);

3. Set the ball object details, as a variable named b.  Set the x and y start position, the width and height for the ball, the direction on x axis and direction on y axis.  Add a speed value and a blank object for the animation object.

const b = {x:50,y:30,w:40,h:40,dx:1,dy:1,speed:5,ani:{}}

4. Create a new page element nested within the main page element.  Assign the object to a variable named ball, and append it to the main page element.

const ball = document.createElement(‘div’);

main.append(ball);

5. Setup the style values, apply height and width, update the ball to be round and with the b object property values.  *Yes this can also be set with CSS

main.style.width = ‘600px’;

main.style.height = ‘400px’;

main.style.backgroundColor = ‘black’;

ball.style.backgroundColor = ‘red’;

ball.style.borderRadius = ‘50%’;

ball.style.width = `${b.w}px`

ball.style.height = `${b.h}px`

ball.style.position = ‘relative’;

ball.style.left = `${b.x}px`;

ball.style.top = `${b.y}px`;

6. Create a function named mover() to handle the animation.  Within mover update the b.x and b.y position values using the direction multiplied by speed.

   b.x += b.dx * b.speed;

   b.y += b.dy * b.speed;

7. Set the ball style, updating the style values with the new x and y position for the ball.  This will update it to the page.

   ball.style.left = `${b.x}px`;

   ball.style.top = `${b.y}px`;

8. Run the next repaint with the requestAnimationFrame, you can assign it to a variable in case it needs to be canceled.  

b.ani = requestAnimationFrame(mover);

9. In the mover() function check for the x and y axis boundaries, if the position is outside the boundaries reverse the direction by multiplying it by -1.  1*-1 = -1 and 1*1=1  so the result will be that the direction will be either negative or positive 1.

   if(b.x>600-b.w || b.x < 0){

       b.dx *= -1;

   }

   if(b.y>400-b.h || b.y < 0 ){

       b.dy *= -1;

   }

10. Globally invoke the mover() function, this can be done within the requestAnimationFrame

b.ani = requestAnimationFrame(mover);

const main = document.querySelector(‘.main’);const b = {x:50,y:30,w:40,h:40,dx:1,dy:1,speed:5,ani:{}}const ball = document.createElement(‘div’);main.append(ball);
main.style.width = ‘600px’;main.style.height = ‘400px’;main.style.backgroundColor = ‘black’;ball.style.backgroundColor = ‘red’;ball.style.borderRadius = ‘50%’;ball.style.width = `${b.w}px`ball.style.height = `${b.h}px`ball.style.position = ‘relative’;ball.style.left = `${b.x}px`;ball.style.top = `${b.y}px`;
b.ani = requestAnimationFrame(mover);
function mover(){ if(b.x>600-b.w || b.x < 0){ b.dx *= -1; } if(b.y>400-b.h || b.y < 0 ){ b.dy *= -1; } b.x += b.dx * b.speed; b.y += b.dy * b.speed; ball.style.left = `${b.x}px`; ball.style.top = `${b.y}px`; b.ani = requestAnimationFrame(mover);}