Javascript Breakout

Sat, Jun 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.

read 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.

read 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.

read 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.

read more…


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, 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.

read 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.

read more…

What’s Left

This version of breakout is still missing some things:

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…

You can find the game here and the code is here