Ball Bounce Algorithm

#1

I am trying to make a ball div bounce within a container div called panel. This is the code that I have for it so far:

<!Doctype html>
<html>
	<title>
		Animation Tester
	</title>
	
	<style>
		#Panel
		{
			position: relative;
			width: 800px;
			height: 800px;
			background-color: #00e68a;
		}
		
		#Ball
		{
			position: absolute;
			width: 20px;
			height: 20px;
			background-color: yellow;
			border-radius: 100%;
		}
	</style>
	
	<body onload = "runAnimation()">
		
		<div id = "Panel">
			<div id = "Ball">
			</div>
		</div>
		
		<script>
		
			function runAnimation()
			{
				var ball = document.getElementById("Ball");
				var panel = document.getElementById("Panel");
				
				var posTop = 0;
				var posLeft = 0;
				var oneStep = 1;
				var twoStep = 2;
				var xDistToEnd = 780;
				var yDistToEnd = 780;
				
				setInterval(function()
							{
								if(xDistance === 0)
								{
									oneStep *= -1;
									xDistToEnd = 780;
								}
								
								if(yDistance === 0)
								{
									twoStep *= -1;
									yDistToEnd = 780;
								}
								
								posTop += oneStep;
								xDistToEnd = xDistToEnd - 1;
								posLeft += twoStep;
								yDistToEnd = yDistToEnd - 2;
								
								ball.style.top = posTop + 'px';
								ball.style.left = posLeft + 'px';
							}, 5);
				
			}
		</script>
	</body>
</html>

The ball won’t even move for some reason.

  1. What’s wrong here? It looks like it should work.
  2. How would you write an algorithm that makes a ball bounce around a container?

Thanks for your response! (P.S. I’m trying to eventually create pong. I know one would usually use canvas but to practice manipulating divs I’m going without canvas for this project)

#2

Check your console for errors.

#3

Okay, I got it. Thanks, I now know to check the console for errors.

#4