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.
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.
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.
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.
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.
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.
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
You can find the game here and the code is here