HTML5 Canvas, 2nd Edition

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 value in that array index:

document.onkeydown = function(e){

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

   document.onkeyup = function(e){

      e = e?e:window.event;
      //ConsoleLog.log(e.keyCode + "up");
      keyPressList[e.keyCode] = 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:

if (keyPressList[38]==true){
   //thrust
   var angleInRadians = player.rotation * Math.PI / 180;
   facingX = Math.cos(angleInRadians);
   facingY = Math.sin(angleInRadians);

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

if (keyPressList[37]==true) {
   //rotate counterclockwise
   rotation-=rotationalVelocity ...