Previously, we learned how to make the box bounce back from the horizontal edges of the canvas. Now, let’s take it a step further by introducing vertical movement. This will make the box bounce back from both the horizontal and vertical edges of the canvas.
The animation introduces a yCoordinate variable to track the vertical position of the box and a yIncrement variable to control its speed along the vertical axis. In each frame, the yCoordinate is updated by adding the value of yIncrement, which allows the box to move vertically in addition to its horizontal movement.
We have now recreated the animation we saw in the first lesson.