JavaScript for Kids

Chapter 15. Controlling Animations with the Keyboard

Now that you know how to work with the canvas; draw and color objects; and make objects move, bounce, and grow in size, let’s liven things up by adding some interactivity!

In this chapter, you’ll learn how to make your canvas animations respond when a user presses a key on the keyboard. This way, a player can control an animation by pressing an arrow key or one of a few assigned letters on their keyboard (like the classic W, A, S, D game controls). For example, instead of just having a ball bounce across a screen, we can have a player control the movement of the ball using the arrow keys.

Keyboard Events

JavaScript can monitor the keyboard through keyboard events. Each time a user presses ...