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.
- What’s wrong here? It looks like it should work.
- 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)