HTML5 keyboard input for Games

The first thing we need to do is set up a function to capture keyboard input. Initially we will set something up that is primarily to check and see that we are actually capturing that input. We will also need to set up a listener in our onload function so that the function get's called when that event is triggered.

function keyboardInput(event: KeyboardEvent) {
   // PRESS LEFT ARROW
   if (event.keyCode == 37) {
      window.alert("Left Key Pressed");
   }
   // PRESS UP ARROW
   else if (event.keyCode == 38) {
      window.alert("Up Key Pressed");
   }
   // PRESS RIGHT ARROW
   else if (event.keyCode == 39) {
      window.alert("Right Key Pressed");
   }
   // PRESS DOWN ARROW
   else if (event.keyCode == 40) {
      window.alert("Down Key Pressed");
   }
   // PRESS SPACE BAR
   else if (event.keyCode == 32) {
      window.alert("Space Key Pressed");
   }
}

window.onload = () => {
   canvas = <HTMLCanvasElement>document.getElementById('cnvs');

   document.addEventListener('keydown', keyboardInput);

   ctx = canvas.getContext("2d");
   gameLoop();
}

This is a little program you can use to test the keyboard input you want. The keycodes are numbers that correspond to keys on the keyboard, and they are the same for TypeScript and JavaScript. I have an abbreviated list of keycodes here. If there is a key you can't find, a quick Google or Bing search should turn it up. If you run the code above and press the Up Arrow Key, you'll end up getting a windows alert box that looks like this:

Keycode Up

You can also look at the full TypeScript Source Code

Moving an asteroid with keyboard input

The next thing we are going to do, is change our keyboard input so that it can move an asteroid around the canvas. The first step in this is to create the asteroid we want to move around. The following code does not go in a class, and can be placed above the onload function. You will also need to set the velocity values to 0, because the asteroid class's constructor function sets those values randomly.

var asteroid: cAsteroid = new cAsteroid();
asteroid.velocityX = 0;
asteroid.velocityY = 0;

After you add the code to create the asteroid, you'll need to change the game loop to draw that asteroid.

function gameLoop() {
   requestAnimationFrame(gameLoop);
   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, 1280, 720);
   asteroid.draw();
}

So now we should have an asteroid being drawn to the canvas, but we're not yet able to move it. In order to move it, we will need to change our keyboardInput function to modify the x and y values for the asteroid.

function keyboardInput(event: KeyboardEvent) {
   // PRESS LEFT ARROW OR 'A' KEY
   if (event.keyCode == 37 || event.keyCode == 65) {
      asteroid.x -= 5;
   }
   // PRESS UP ARROW OR 'W' KEY
   else if (event.keyCode == 38 || event.keyCode == 87 ) {
      asteroid.y -= 5;
   }
   // PRESS RIGHT ARROW OR 'D' KEY
   else if (event.keyCode == 39 || event.keyCode == 68 ) {
      asteroid.x += 5;
   }
   // PRESS DOWN ARROW OR 'S' KEY
   else if (event.keyCode == 40 || event.keyCode == 83 ) {
      asteroid.y += 5;
   }
}

There is one problem with using the arrow keys in this HTML app, and that is this web page can scroll. Because of that, if you use the up and down arrow keys, the asteroid does move as expected, but the web page also scrolls up and down. Because of this, I've also added WASD controls. This lets you use the 'W' key to move the asteroid up and the 'S' key to move the asteroid down. This helps with the scrolling issue. Typically on a web page where you had a game, there wouldn't be any content above or below the game for the user to scroll to. However, it is possible that this situation could crop up, in which case you should look for some keyboard alternatives to the arrow keys.

Check out the full source code: Basic Keyboard Input

Part 2 - Moving A Space Ship with Keyboard Input