Canvas Games: Part I - HTML5 Canvas - page 659

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 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 valueinthe keyPressList arrayattheindexassociated withtheevent's keyCode .Con-
versely, the key up event will place a false value in that array index:

document . onkeydown = function function ( e ){

e = e ? e : window . event ;
//ConsoleLog.log(e.keyCode + "down");
keyPressList [ e . keyCode ] = true true ;

}

document . onkeyup = function function ( e ){

e = e ? e : window . event ;
//ConsoleLog.log(e.keyCode + "up");
keyPressList [ e . keyCode ] = false false ;

};

Evaluating key presses

Our game will need to include code to look for true (or false ) values in the keyPressList
array and use those values to apply game logic:

iif ( keyPressList [ 38 ] == true true ){

//thrust
var

var angleInRadians = player . rotation * Math . PI / 180 ;
facingX = Math . cos ( angleInRadians );
facingY = Math . sin ( angleInRadians );

movingX = movingX + thrustAcceleration * facingX ;
movingY = movingY + thrustAcceleration * facingY ;