Table of Contents
Our goal here is for the ball to change velocity when it hits the side of the canvas rather than keep going off infinitely. Because we have a
y coordinate position for the ball, we can determine when it has gone past the boundaries of the canvas. For this we will use
if statements to check whether the ball is outside of the canvas. We also create two variables called
vy which is the velocity of the ball in the x and the y axis respectively.
if statements are read in your head like
(condition) is true then run the code inside of the
Now the ball should bounce back after hitting the edge of the screen! :) But, it keeps going past the other side now. :( What we need to do is check if the ball has gone past the top left corner of the screen which is
(0, 0). We can change the
if statements to say
if the ball is past the bottom right corner, or
if the ball is past the top left corner, change the velocity. We do that by changing our condition to
(past bottom right corner || past top left corner).
Yay! It should bounce back and forth now. :)
Now, let’s modify our program to use the keyboard to control the movement of the ball. Take out where the velocity is automatically added to the position of the ball because we want the keyboard to handle that.
Next, we add an event listener to the html page. We do that with the
document.addEventListener() function. It takes the event name as input, along with the function that you want it to run every time that event happens. For us, we would use the
keydown event because we want to be able to tell when a key on the keyboard has been pressed. That looks like this:
The function provided to
document.addEventListener() takes the event as an argument. This event has information like what key was pressed, which we can use to determine whether to move the ball left, right, up, or down.
console.log takes any kind of input and prints this out to the browser’s console. To see the console, right click on the webpage, click
Inspect, then click
Console. What you log with
console.log() should show up in the window that pops up.
So, you might be wondering… Nick, how do we tell what key we pressed? Good question :) We can use those
if statements that we just learned to tell what the key is named. Go back to your webpage and press keys. You should notice in the console there is a
event.key variable. When you press the left arrow key,
ArrowLeft. For the right arrow key,
ArrowUp for the up arrow key, and you guessed it
ArrowDown for the down arrow key.
== rather than
== checks if two things are equal, and
= changes a variable. In the console you should see the “left key pressed” when you press the left arrow key, “up key pressed” for the up arrow key, etc.
So then, we can directly change the position inside of this event listener we created:
Advanced Keyboard Handling
Wowzers! Your code should now let you move the circle around the canvas! But wait… when you press and hold down an arrow key, the movement is jerky and doesn’t look as nice as it should. Also, you can’t press two keys at the same time to move the circle. You can only move the circle in one direction at a time. :( Let’s fix that. What we want is to move the circle when a key is pressed in that direction and stop moving the object when the key is released. We can use the
keyup event to tell when the key has been released. :) Isn’t the browser great? So what we can do is say hey this key is pressed inside of a variable when the
keydown event fires and change that variable to say the key is not pressed when we get the
You should see that we are using these weird true and false values rather than numbers or strings.
false are boolean values. For a boolean variable, its value can be either
false, and we can use them in
if statements. So
true, then subtract the x velocity from the ball’s position.
true add the x velocity to the ball’s position, and so on for up and down. We put this inside of the
draw() function because we want it to run every time the ball is drawn. We can’t use the
keydown events because they only run when the key is first pressed up or released and then infrequently. We want smooth motion while the key is pressed.
Fantastic job! Now your ball should be controllable by your arrow keys. :)
Check out other posts in this series
Join me in learning about how computers work
Just enter your email into the box below. You'll also receive my free 12 page guide, Getting Started with Operating System Development, straight to your inbox just for subscribing.