Programming Basics: A website for teaching people how to program
 
Do your programming with [jsbin] or [Orion]

Computer Animation with HTML5 Canvas and JavaScript: Keyboard Control

So now that I've shown you how to move people around the screen, why don't I show you how to use a keyboard to control a person? So in a way, it's like the beginning of a game. You can press keys on your keyboard, left and right, and have your person move left and right as well.

So first, let's review the code for making a person move to the right.

First you need this repeat() command, which causes your program to run again and again.

Because your program runs more than once, you can draw different pictures each time, which makes your images seem to move.

So first you clear your screen...

and draw the person and you increase x.

Then you clear the screen,

Draw the person in the new position further to the right, and increase x.

Then you clear the screen,

draw the person further to the right, and increase x. And when you do this again and again really fast, it looks like your person is moving across the screen.

So to help you out, I've written some special code that makes it easier to use the keyboard. So in order to use the keyboard in your program, all you have to do is here, where you have x=x+1, which moves your image to the right,

you just cross out the 1

and change it to a dx. dx is a special variable that's available in the tools that you're using to do your programming today.

So when you press the right arrow key on your keyboard, you want your person to move to the right.

And when you press the left arrow key on your keyboard, you want your person to move to the left. So just by changing the 1 to dx, you now have keyboard control over your person on the screen.

After changing the 1 to a dx in your program, you'll notice that when when you press the right arrow on your keyboard, you'll see that your program moves your person to the right. When you press the left arrow on your keyboard, you'll notice that your person moves to the left. So that's it. That's all you have to do to get keyboard support in your program. But what's so special about this dx variable that lets us control the person using the keyboard?

Now dx is a special variable that I've made available in the tools that you're using to do your programming. So usually when you don't press any keys on your keyboard, dx is 0. But when you press the right arrow key on your keyboard, dx is 1. And when you press the left arrow on your keyboard, dx is set to -1. So how does this variable work in letting you control your person?

So just remember that you have an x and y position for drawing your images. So basically if you want to draw a person at 90,90, that means if x is 90, you should move 90 pixels to the right, and if y is 90 that means you should move ninety pixels down. And you should draw your person there. So the first number x is is how far to the right to a person should be drawn.

So if you want to move a person to the right, you want x to be bigger.

So instead of 90 you would use a bigger number like 150, and this would draw a person further to the right.

Now if you wanted to move a person to the left, you want this x number, this 90, to be smaller. So instead of 90, you would use a smaller number like 30, which would cause the person to be drawn further to the left.

So now you should think about this in terms of how you should change x to get a person to move right or left.

Now to move to the right, x should get bigger. Now one way to get x bigger is to go x=x+1.

To move to the left, x should get smaller. So to get x smaller, you can just subtract from it. So you do x=x-1.

Now remember how the keyboard works. There's a special variable called dx. Usually this dx is 0. So if you don't press any keys, dx is 0. But when you press right, dx is 1. And when you press left, dx is -1.

So if you want the person to go to the right, basically you press the right arrow key. So when you press the right arrow key, you want x=x+1. But when you press the right arrow key, dx is 1.

So instead of having x=x+1, you can have x=x+dx.

Now if you want the person to go to the left, you press the left arrow key. Now when you press the left arrow key, you x to get smaller or x=x-1.

But remember, dx is -1. So basically, x=x-1 is the same as x=x+dx.

So if you want to go to the right, you press the right arrow key, and you should run x=x+dx. And to go to the left, you press the left arrow key, and you want to run the command x=x+dx. So these commands are the same: x=x+dx. So basically, if you always run this command, it will automatically handle the keyboard for you. When you press right, dx is 1, x will get bigger. When you press left, dx is -1, and x will get smaller.

So that's why if you have a program that moves a person to the right. If we just take our line that moves the person...

and change the 1

to a dx, it will give us control of the person.

When you press right, dx is 1, so x=x+1, which makes x bigger, which moves the person to the right.

When you press the left arrow key, dx is -1, so x=x+dx is the same as x=x-1 (because dx is -1). So pressing the left arrow key makes x smaller, which moves the person to the left.

So sometimes when you run this program, to get the keyboard to work, you have to click on this output area first, so that the program knows that you want you use the keyboard to control the person.

So now that you know how to use the keyboard to control a person on the screen, why don't you make a program that lets you move a character in some interesting environment? Or, if you're more advanced, why don't you try writing a program that lets you move a character up and down as well as left and right?

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy