{"id":442,"date":"2013-06-24T17:06:57","date_gmt":"2013-06-24T17:06:57","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=442"},"modified":"2013-06-24T17:07:43","modified_gmt":"2013-06-24T17:07:43","slug":"create-html5-canvas-shooter-part4-keyboard-interaction","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/create-html5-canvas-shooter-part4-keyboard-interaction\/","title":{"rendered":"How to create a HTML5 Canvas shooter \u2013 Part4: Keyboard Interaction"},"content":{"rendered":"

Adding the new functions<\/h2>\n

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()<\/em> function<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n<\/td>\n
\n
\n
function<\/code> keyPress(e){<\/code><\/div>\n
<\/div>\n
}<\/code><\/div>\n
<\/div>\n
function<\/code> keyRelease(e){<\/code><\/div>\n
<\/div>\n
}<\/code><\/div>\n
<\/div>\n
function<\/code> move(){<\/code><\/div>\n
<\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

We also need to add 5 new variables that these functions will need to use.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n<\/td>\n
\n
\n
var<\/code> main_x = 0, main_y = 0, move_x = 0, move_y = 0;<\/code><\/div>\n
var<\/code> speed = 3;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

When a key is pressed down<\/h2>\n

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<\/a><\/p>\n

So in the keyPress() function add the following code to handle each key press<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n<\/td>\n
\n
\n
function<\/code> keyPress(e){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 68){ <\/code>\/\/d<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 65){ <\/code>\/\/a<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 83){ <\/code>\/\/s<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}\u00a0\u00a0\u00a0 <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 87){ <\/code>\/\/w<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

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.<\/p>\n

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.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n<\/td>\n
\n
\n
function<\/code> keyPress(e){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 68){ <\/code>\/\/d<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_x = speed;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 65){ <\/code>\/\/a<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_x = -speed;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 83){ <\/code>\/\/s<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_y = speed;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}\u00a0\u00a0\u00a0 <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 87){ <\/code>\/\/w<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_y = -speed;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

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.<\/p>\n

When a key is released<\/h2>\n

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.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n<\/td>\n
\n
\n
function<\/code> keyRelease(e){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 68){ <\/code>\/\/d<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_x = 0;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 65){ <\/code>\/\/a<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_x = 0;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 83){ <\/code>\/\/s<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_y = 0;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}\u00a0\u00a0\u00a0 <\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>(e.keyCode == 87){ <\/code>\/\/w<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>move_y = 0;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

The Move() function<\/h2>\n

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.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/td>\n
\n
\n
function<\/code> move(){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>main_x += move_x;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>main_y += move_y;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

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.<\/p>\n

Finishing up<\/h2>\n

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.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n<\/td>\n
\n
\n
mouseX = mouseX - (top_canvas.width\/2); <\/code><\/div>\n
mouseY = mouseY - (top_canvas.height\/2);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Just minus the value of main_x and main_y so you are left with.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n<\/td>\n
\n
\n
mouseX = mouseX - (top_canvas.width\/2) - main_x; <\/code><\/div>\n
mouseY = mouseY - (top_canvas.height\/2) - main_y;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

At the bottom of the init() function add the following event listeners<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n<\/td>\n
\n
\n
window.addEventListener(<\/code>\"keydown\"<\/code>, keyPress, <\/code>false<\/code>);<\/code><\/div>\n
window.addEventListener(<\/code>\"keyup\"<\/code>, keyRelease, <\/code>false<\/code>);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Finally add the move() function to the gameLoop() this will make those values update in time with the rest of the game.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[22,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/442"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=442"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/442\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}