Javascript Breakout(June 11, 2011)

Exploring further into the suitability of the HTML5 <canvas> as a game environment, here is my interpretation of the classic breakout game.

Breakout is only a small step up from my previous pong game, but it was complex enough to introduce its own set of challenges.

Over the next few days I will write up a couple of articles going into more depth on some of these issues, including:

Game State

Switching from Pong to Breakout introduces a little more complexity in the game state, with scores, highscores, lives, levels and such it became worthwhile to invest a little time in some better coding patterns.

In breakout, I found it useful to use a state machine to manage the current state.

more…

Canvas Rendering Performance

The Pong game was simple enough that the entire view could be redrawn 60 frames per second, but that can be pretty wasteful if only a small part of the view is actually changing (the moving ball, the paddle, etc).

In breakout, performance was significantly improved by rendering component pieces offscreen and simply blitting them to the canvas with drawImage() at 60fps, then only re-render the offscreen image when necessary, e.g. when a brick is removed, or the score changes.

more…

Collision Detection

With breakout, collision detection becomes more complex because there are significantly more objects that the ball could collide with, and its possible, even with a small dt time delta that a fast ball could collide with multiple bricks.

more…

Gameplay Balance

Breakout is a simple game, but you still need to spend some time fine tuning the gameplay balance. Levels need to be created, level difficulty should be identified so that easier levels come early on, the ball speed and accelleration was fine tuned, along with the number of lives and scoring strategy.

more…

Sound

For Breakout, I turn to a 3rd party library, soundmanager2 to provide a simple interface for using a hidden flash object to manage the audio. The sound effects are provided by freesound.org, where I found a couple of boing sound effects for the ball hitting the brick and the paddle. I also picked up some simple voice-over samples for go, game over and level up.

more…

Touch Events

Adding touch support for breakout on mobile devices introduces some interesting issues, the biggest being that the <canvas> performance on mobile devices is… well, lets just say its ‘weak’.

It is playable on an iPad2 at about 30fps, but on android devices (I tested with honeycomb on a galaxy tab 10.1) the frame rate can be as low as 5-10fps depending on the browser - and that is unacceptable.

more…

What’s Left

This version of breakout is still missing some things:

  • More levels (and a level editor)
  • More ‘flair’ (flashing high score, game over messaging etc)

But I’m going to leave all of that until a future experiment where I turn Breakout into Arkanoid which is a much more fun game, but that will be some future date because I think I’m going to go in a slightly different direction for my next weekend project…

Related Links