Bouncing Ball - Screensaver Effect

Bouncing Ball

In a Nutshell: This simple Javascript demonstrates how a ball (or other object) can be set to bounce around the screen - changing direction when it hits the edge. Rather mesmerizing to look at, this resembles some of the screensaver effects that used to be popular back in the day.

Use it Yourself: Copy the code from below and paste it within the <head> section of your HTML code (or in your CSS file). This is the portion that determines the appearance of the object being moved - in this case a red circle.

Next, the following Javascript component must be placed within the <body> section of your HTML code. The div element creates the ball object, and the Javascript snippet controls the starting position, speed of travel, collision detection and change of direction.

<div id="ball"></div> <script language="javascript"> var ball = document.getElementById('ball'); var xPos = 50; // Starting x position var yPos = 50; // Starting y position var xSpeed = 2; // Speed of the ball in x direction var ySpeed = 3; // Speed of the ball in y direction function animate() { var width = window.innerWidth; var height = window.innerHeight; xPos += xSpeed; yPos += ySpeed; // Detect collision with right or left wall and reverse direction if (xPos + ball.offsetWidth > width || xPos < 0) { xSpeed = -xSpeed; } // Detect collision with top or bottom wall and reverse direction if (yPos + ball.offsetHeight > height || yPos < 0) { ySpeed = -ySpeed; } ball.style.left = xPos + 'px'; ball.style.top = yPos + 'px'; requestAnimationFrame(animate); } animate(); </script>

This Script Created By: Joshua Smith + OpenAI

Copyright © 1999-2025 Curiosity Cave Pty Ltd. All rights by all media reserved. All elements on this site, including page design, contents and graphics (with the obvious exception of the free Javascripts) may not be reproduced, broadcast, rewritten or redistributed in whole or in part without the expressed written permission of Curiosity Cave Pty Ltd.