NoKarma.org

Javascript Game Development - Keyboard Input

2011-02-27T00:00:00-08:00

Now that we have our basic game loop layed out, we can focus on implementing other aspects of our javascript based game. What I want to show in this post is how you process keyboard input.

Keyboard Events

If you’ve done any previous web development with javascript, you’ll most likely know the keydown and keyup events that get fired by the browser when a key is pressed down and released again.

Let’s say we want to create a game where the player controls a small black rectangle and can move it around in a bigger area (very sophisticated, I know!).

First, we’ll need a class that represents our player object:

function Player() {
  this.x = 0;
  this.y = 0;
}

Player.prototype.draw = function(context) {
  context.fillRect(this.x, this.y, 32, 32);
};

Player.prototype.moveLeft = function() {
  this.x -= 1;
};

Player.prototype.moveRight = function() {
  this.x += 1;
};

Player.prototype.moveUp = function() {
  this.y -= 1;
};

Player.prototype.moveRight = function() {
  this.y += 1;
};

Next, we’ll need to hook up on instance of the Player class to our existing game code.

Game.start = function() {
  ...
  
  Game.player = new Player();
  
  ...
};

Game.draw = function() {
  ...
  
  Game.player.draw(Game.context);

  ...
};

Last, we need to setup our event handling code.

window.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 37: // Left
      Game.player.moveLeft();
    break;

    case 38: // Up
      Game.player.moveUp();
    break;

    case 39: // Right
      Game.player.moveRight();
    break;

    case 40: // Down
      Game.player.moveDown();
    break;
  }
}, false);

This first version kinda works, but it is pretty choppy and only ever works for one key. Why?

The choppiness is due to the fact that the keydown event is fired repeatedly with small pauses between each event, and these pauses are not synced up with our game update code. So we’ll have to figure out a way to get them in sync.

The problem that only ever one key is recognized comes from the fact that the browser only ever repeats keydown events for the last key that was pressed.

For working around these two problems, I’m using this super simple helper object:

var Key = {
  _pressed: {},

  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  
  isDown: function(keyCode) {
    return this._pressed[keyCode];
  },
  
  onKeydown: function(event) {
    this._pressed[event.keyCode] = true;
  },
  
  onKeyup: function(event) {
    delete this._pressed[event.keyCode];
  }
};

You can hook it up to keydown and keyup events like this:

window.addEventListener('keyup', function(event) { Key.onKeyup(event); }, false);
window.addEventListener('keydown', function(event) { Key.onKeydown(event); }, false);

This object tracks the key status of individual keys based on the keydown/keyup events fired by the browser. Using it, we can easily check in our game update code whether a specific key is currently pressed down or not. Now we add the following function to our Player class:

Player.prototype.update = function() {
  if (Key.isDown(Key.UP)) this.moveUp();
  if (Key.isDown(Key.LEFT)) this.moveLeft();
  if (Key.isDown(Key.DOWN)) this.moveDown();
  if (Key.isDown(Key.RIGHT)) this.moveRight();
};

Then we only need to hook this also up to the Game.update method:

Game.update = function() {
  ...
  Game.player.update();
  ...
};

Check out this final version.

Javascript Game Development - The Game Loop

2011-02-02T00:00:00-08:00

One of the most important parts of a game engine is the so called “game loop”. It is the central piece of the game’s engine and is responsible for trying to balance running a game’s logic, and executing its drawing operations.

A very basic game loop would look something like this in JavaScript (this does not work in Browsers!):

var Game = { };

Game.draw = function() { ... draw entities here ... };
Game.update = function() { ... run game logic here ... };

while (!Game.stopped) { // While the game is running
  Game.update();        // Update Entities (e.g. Position)
  Game.draw();          // Draw Entities to the Screen
}

Writing a game loop for execution in the browser is a tad more tricky than that. We can’t just use a while loop that runs forever, as JavaScript execution blocks the browser from repainting its window, making the game seem to have “locked-up”.

So we’ll have to try “emulating” a real loop, while giving back control to the browser after every drawing operation to not lock-up the interface.

setInterval to the rescue!

window.setInterval is exactly what we’re looking for. It provides a way to run code in a loop while allowing the browser to repaint the window in between the loop runs.

Game.fps = 50;

Game.run = function() {
  Game.update();
  Game.draw();
};

// Start the game loop
Game._intervalId = setInterval(Game.run, 1000 / Game.fps);

...

// To stop the game, use the following:
clearInterval(Game._intervalId);

Check out the example page for a game loop that uses setInterval.

That’s it?

Well, yeah. At least for a basic game. The main problem with this kind of loop is that the updating and drawing operations are “glued” together (this means your game’s logic will run as fast as your drawing operations). So if your frame rate drops below 60fps, your game will also seem to be running slower.

For some games, this might never be a problem, for others this behaviour can lead to jerkiness. Also, if you want to add a multiplayer component, you want to make sure that your logic runs with the same speed on all your clients.

This can be achieved using a so called ”game loop with fixed time steps”. Basically, we try to run the logic a fixed amount of times per second, while trying to draw as many frames per second as possible.

Game.run = (function() {
  var loops = 0, skipTicks = 1000 / Game.fps,
      maxFrameSkip = 10,
      nextGameTick = (new Date).getTime();
  
  return function {
    loops = 0;
    
    while ((new Date).getTime() > nextGameTick && loops < maxFrameSkip) {
      Game.update();
      nextGameTick += skipTicks;
      loops++;
    }
    
    Game.draw();
  };
})();

// Start the game loop
Game._intervalId = setInterval(Game.run, 0);

Now, this will give us a game loop that runs 50 Game updates per second, while trying to run the drawing code as often as possible.

This gives very, very smooth animations, on my machine, I get around 200 drawing operations per second with Google Chrome, while the number of updating operations stays constant at 50 per second.

Check out the example.

Conclusion

Wow, that’s been a long journey we had to undertake to get a game loop that’s giving us both smooth animations while making sure that our game runs at a constant pace.

I’ll try to post some more articles about game development using Javascript and HTML5 over the next weeks, so make sure to check back from time to time!

Edit - February 3rd, 2010

As was pointed out in the comments, there is no benefit in running more drawing operations than update operations (except for maybe benchmarking), so you have to either interpolate or skip drawing if there were absolutely no game updates.

Skipping drawing operations is actually really easy to achieve, just put a small condition around the call to Game.draw:

if (loops) Game.draw();

This makes sure that we only draw the game if we have run at least one updating operation.

Interpolation is a bit more difficult, as you have to make all drawing operations aware of the interpolation, and it will make your game drawing code considerably more complicated.

Here is the code for an interpolating game loop:

// Updated drawing code for our objects
Rect.prototype.draw = function(context, interpolation) {
  context.fillRect(this.x, this.y + this.velocity * interpolation, 30, 30);
};

Game.draw = function(interpolation) {
  this.context.clearRect(0, 0, 640, 480);

  for (var i=0; i < this.entities.length; i++) {
    this.entities[i].draw(this.context, interpolation);
  }
};

Game.run = (function() {
  var loops = 0, skipTicks = 1000 / Game.fps,
      maxFrameSkip = 10,
      nextGameTick = (new Date).getTime(),
      lastGameTick;

  return function() {
    loops = 0;

    while ((new Date).getTime() > nextGameTick) {
      Game.update();
      nextGameTick += skipTicks;
      loops++;
    }

    if (!loops) {
      Game.draw((nextGameTick - (new Date).getTime()) / skipTicks);
    } else {
      Game.draw(0);
    }
  };
})();

Now, if you’re going to do interpolation, you should also lower the number of game updates you run, down to maybe 25 or 30 updates per second (but don’t forget to update the movement speed of your objects accordingly).