Workshop Coding Challenge: Fix This Breakout Game

It can be tricky to sit down and practise new coding techniques, so here’s a fun exercise to encourage you to play with collision detection and reaction, as covered by Kah Shiu.

Update: I’ve added an HTML5 version to go alongside the existing Flash version – enjoy!

The Challenge

This breakout game is broken!

Flash version:

To play the HTML5 version (using canvas and JavaScript), click here.

Oh sure, some of the basics are there; the paddle can be controlled by the left and right arrow keys, the ball moves, and all the objects are drawn to the stage correctly. But there’s barely any collision detection or reaction: the paddle can move off the sides of the screen, the ball doesn’t bounce off it, and the bricks might as well not be there at all.

All the code is available in this ZIP file. (The Flash version is in FlashDevelop format, but it’ll be easy to use it in Flash Pro, FDT, Flash Builder, or whatever your IDE of choice is.)

Once you’ve familiarised yourself with it, use what Kah Shiu has taught in his Collision Detection and Reaction Session to fix the problems with the game.

You can make this as simple or as complicated as you like, depending on how comfortable you are with the concepts. For instance, you could add triangular bricks, or have multiple balls bouncing around at once.

Of course, you’re not restricted to my code or graphics; feel free to change anything you like!

If you come up with something neat, please send it in using this form or link to it in a comment below. I look forward to checking out what you come up with.