Adding the new functions
To make our HTML5 game more interactive we need to add three new functions to allow some movement with the w, s, a, d keys. They will be used to handle when a key is pressed down, when a key is released and one small function to update these values in the game loop. So add the following above the mouseMove() function
|
1
2
3
4
5
6
7
8
9
10
11
|
function keyPress(e){}function keyRelease(e){}function move(){} |
We also need to add 5 new variables that these functions will need to use.
|
1
2
|
var main_x = 0, main_y = 0, move_x = 0, move_y = 0;var speed = 3; |
When a key is pressed down
JavaScript needs the key code of each key to know what has been pressed. We will use D:68, A:65, S:83 and W:87. You can find all of the codes right here http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
So in the keyPress() function add the following code to handle each key press
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function keyPress(e){ if(e.keyCode == 68){ //d } if(e.keyCode == 65){ //a } if(e.keyCode == 83){ //s } if(e.keyCode == 87){ //w }} |
The reason we are keeping each if statement separate and not using if else is because we want our functions to handle multiple key presses at the same time. This will allow our shape to move up and left or down and right.
We need to fill these if statements with some code, we will update our new variables which will later be passed to our shape. Update the function to look like this.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function keyPress(e){ if(e.keyCode == 68){ //d move_x = speed; } if(e.keyCode == 65){ //a move_x = -speed; } if(e.keyCode == 83){ //s move_y = speed; } if(e.keyCode == 87){ //w move_y = -speed; }} |
The reason for the speed variable is to make it easy to change the speed if we wish to. As you can see we are updating move_x to move horizontaly and move_y to move vertically.
When a key is released
Next we will make the key release function, now we have made the key press function this will be really simple to do. All we need is to reset the value of move_x and move_y to 0 so the shape is no longer updated with the value passed by the speed variable, and will in turn stop moving.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function keyRelease(e){ if(e.keyCode == 68){ //d move_x = 0; } if(e.keyCode == 65){ //a move_x = 0; } if(e.keyCode == 83){ //s move_y = 0; } if(e.keyCode == 87){ //w move_y = 0; }} |
The Move() function
We have two other variables we have not used yet, main_x and main_y. In the move() function we will update this value with move_x and move_y.
|
1
2
3
4
|
function move(){ main_x += move_x; main_y += move_y;} |
As you can see we are using += instead of just plus this will add the value of the move variables to the current value of the main variables. So the shape will not sporadically jump about the canvas.
Finishing up
The shape will still not move because we have not done anything with the values or added event listeners to fire our functions. In the mouseMove() function update the following lines of code.
|
1
2
|
mouseX = mouseX - (top_canvas.width/2); mouseY = mouseY - (top_canvas.height/2); |
Just minus the value of main_x and main_y so you are left with.
|
1
2
|
mouseX = mouseX - (top_canvas.width/2) - main_x; mouseY = mouseY - (top_canvas.height/2) - main_y; |
At the bottom of the init() function add the following event listeners
|
1
2
|
window.addEventListener("keydown", keyPress, false);window.addEventListener("keyup", keyRelease, false); |
Finally add the move() function to the gameLoop() this will make those values update in time with the rest of the game.
