What are some advanced types of exercise

Advanced animations

In the previous chapter we did some basic animation and learned ways to move things. In this chapter we're going to look at the motion itself and add some physics to make our animations more advanced.

Draw a ball

We're going to use a ball for our animations, so let's first draw a ball on the canvas with the following code.

As usual, we need a draw context first. To draw the ball, we are going to create an object that contains properties and a method to draw it on the canvas.

Nothing special here, the ball is currently a simple circle and is drawn using the (en-US) method.

Add speed

Now we have a ball and we are ready to add some basic animation as we learned in the previous chapter of this tutorial. Again, it helps us (en-US) to control the animation. The ball moves by adding a velocity vector to the position. For each frame clean (en-US) we use the canvas to remove old circles.

Bondage

Without any bound collision check, our ball flies quickly out of the canvas. We need to check the ball's position and position, and if the ball is out of the canvas, reverse the direction of the velocity vectors.

First demo

Let's see what that looks like in action. Move the mouse in the canvas to start the animation.

Acceleration

To make the movement more realistic, you can play at speed, for example:

This slows down the vertical speed in each frame so that the ball ends up bouncing on the ground.

Trace effect

So far we have used the (en-US) method when clearing frames. If you replace this method with, you can easily create a track effect.

Add mouse control

To get some control over the ball, we can make it track the mouse using, for example, the event. The event makes the ball bounce again.

Move the ball with the mouse and click to release it.

Breakout

This short chapter explains just a few ways to create advanced animations. There is a lot more! What about adding a board and some blocks and turning this demo into a breakout game? Check out our game development section for more game-related articles.

See also