This is a clone of the Atari 2600 Breakout game released in 1978. I wanted to learn about game development in HTML5 and JavaScript and found a good Breakout game tutorial on MSN. As a child, I remember playing the Atari 2600 version on a friend's Atari console in the early 80's, and I thought that it would be a fun challenge to try and recreate the game in JavaScript. To my knowledge, this is the first clone of Atari 2600 Breakout done with HTML5/JavaScript

SenseiSelect Website

Game Physics

The ball will occasionally appear to pass through a brick and hit a brick diagonally above/below it. This is not a bug, but rather the way the original game was designed.

Atari 2600 Breakout used "point collision detection" rather than "geometric collision detection" for detecting collisions between the ball and the bricks. When the update() function runs, and the center point of the ball does does not fall withing the rectangular "hit area" of a brick, even though part of the ball may overlap a section of a brick, then a hit will not be registered. This effect can most often be seen when the ball passes diagonally through the corner of a brick allowing it to hit the brick in the row above/below it. For the paddle and walls "geometric collision detection" was used. Remaining faithful to the physics of the original game, this is how I implemented it.

I analyzed YouTube videos of the original Atari 2600 Breakout game, as well as read the documentation about the game, in order to reproduce the physics of the original game as accurately as possible. The ball starts off slow and whenever a brick in the top two rows is hit, the ball will almost double it's speed. Also, if the ball pases above the top row of bricks, the paddle will shrink to almost half it's size.

How It Works

The game uses the HTML5 canvas element and JavaScript to create an accurate clone of the original Atari 2600 Breakout game. It uses MainLoop.js by Isaac Sukin to create accurate timing regardless of the frame rate. MainLoop calls an update callback whenever the physics needs to be recalculated at specific intervals. It then calls a draw callback at the next possible frame to refresh the sceen.

I created several object constructors (ball, paddle, and brick) to encapsulate location and status information for each. These objects also have a draw function added to the prototype which are called from the main draw function to refresh the screen. Since the bricks only need to be redrawn when one is hit (and is removed), I render them on an offscreen canvas called "brickCanvas" and just draw that to the main canvas on every redraw. Whenever a brick is hit, the draw function calls a renderToCanvas function which redraws the bricks to the brickCanvas before rendering them to the main canvas.

The Sound Effects

The audio was actually one of the more challenging areas of the game. I wanted to remain as true to the original game as possible, so I wanted to get ahold of the original samples used. I found a good sample library at Little-Scale which were recorded directly from a PAL Atari 2600 from the hardware itself. I then converted a YouTube video of the original Atari 2600 Breakout game to WAV and imported into Logic Audio. From there, I isolated the sound bank from the samples I had downloaded and was then able to compare the samples to the video to get the correct pitch and sample length for each. I then arranged the samples into an audio sprite and converted it to mp3 and ogg vorbis (so they will play in Firefox)

I originally coded my own audio handler using the new JavaScript audio API, but after reading about the limited adoption for the API, as well as inconsistent support for the various audio codecs, I decided to use a third-party library. I did some research and went with howler.js. It is a lighweight, easy to use library, and it gets the job done!