JavaScript HTML Game Development Tutorial 8 - JavaScript Keyboard Controls (using jQuery events)

JavaScript keyboard events tutorial for HTML5 canvas-based video games is the tutorial 8 in the gamedev series. First we cover ASCII key codes and then we go deep into the forest of keypress (keyup and keydown) events using jQuery and JavaScript keyboard event keyCode property. This can be also achieved using regular JavaScript's addEventListener functions. It's up to you.

JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (indiedev tutorial channel).

This may be a little tedious, but it's a necessary step before we dive into actual game development. Everyone should know how to control game characters with the keyboard anyways!

ASCII codes for arrow keys on the keyboard, as well as W S A D (wsad) controls are explained. There is room for adding your own.

Once we got this behind us, we'll be ready to control just about any game character using the keyboard in any future games we'll be working on .

[pattyorigami]

Question about the key values: the wasd values you show here are for uppercase, yet when I use them in my code the letter keys do their job without me holding down shift (thus a lowercase input). And if I use the lowercase values in my code the movement function doesn't work at all. What's up with that?! It defies logic! Granted, I got my function working and should just move on, but I have to know!

[angelajackson]

I am making a crossword puzzle in html and java, how do you make the keyboard arrows see the computer screen, as when the user presses an arrow key, the cursor will advance up, down, left or right, also backspace? Also how do you make the number in the block, as in 1 across, etc.

[rimsky]

Is it possible to get the source code for this tutorial? I have been following along from tutorial 1. I just added the code to control the dog sprite and it is not moving at all. I am not sure what I did wrong.

Great tutorial! I'm really learning a lot!

[Mrjustplayit]

Thanks a bunch! I actually have to develop a game for a school project. It's a redesign of pacman, but I've come to a problem.
I'm using setInterval for generating map and player, and I've succeeded in making the player move, but if my setInterval second value is somewhere at 25(as in 25/1000), it moves too fast from one point to another, and I want to slow it down.
Any way I could do that?

[efimov]

Why don't you improve keyboard code for getters?
You can save all the keys state in array, it takes more memory (255 bools) but it makes code more beautifull and readable.

something like that:

this.key = Array(255);
for (var i = 0; i < this.key.length; this.key[i++] = false);

this.__defineGetter__('shift', function() { return this.key[16]; } );

and it makes your init code shorter:


key.key[e.keyCode] = true;
});


key.key[e.keyCode] = false;
});