Canvas Game Essentials - HTML5 Canvas - page 395

This is some ugly code, but it works fine if we want our player ship to be pointing up
before we apply rotation transformations. A better method is to keep the current
angleInRadians calculation but draw the ship pointing in the actual angle 0 direction
(to the right). Figure 8-5 shows how we would draw this.
Figure 8-5. The player ship drawn at the 0 degree rotation
The drawing code for this direction would be modified to look like this:
//facing right
context.moveTo(−10,−10);
context.lineTo(10,0);
context.moveTo(10,1);
context.lineTo(−10,10);
context.lineTo(1,1);
context.moveTo(1,−1);
context.lineTo(−10,−10);
Controlling the Player Ship with the Keyboard
We will add in two keyboard events and an array object to hold the state of each key
press. This will allow the player to hold down a key and have it repeat without a pause.
Arcade games require this type of key-press response.
The array to hold our key presses
An array will hold the true or false value for each keyCode associated with key events.
The keyCode will be the index of the array that will receive the true or false value:
var keyPressList = [];
The key events
We will use separate events for both key down and key up. The key down event will put
a true value in the keyPressList array at the index associated with the event's
keyCode . Conversely, the key up event will place a false in that array index: