JavaScript and HTML5 Kaboom Game Clone

After finishing my HTML5 version of Space Invaders, and then modifying it for the iPhone, I decided to attempt generalizing the techniques that I developed. I first crafted a generalized JavaScript class for creating and managing sprites. Then, I created a class to manage the game board. The game board class wraps around the sprite class and handles canvas creation, collision detection, score keeping, and other general tasks. I will write a more detailed description of these items latter, the real reason you are here is to see the results of the final step. With the sprite and game board management methods complete I applied them toward the creation of an actual game.

At this stage I am more interested in investigating JavaScript video game creation techniques rather than developing new game concepts. This focus drove my decision to copy a known, good game concept. The first game system that I used was the Atari 2600; since I am just beginning to write JavaScript that seems like a a good place to start looking for ideas. My favorite Atari 2600 games were Pac-man, Space Invaders, Centipede, Chopper Command, and Kaboom. Google already published an excellent online version of Pac-Man, and I just completed a version of Space Invaders, so that narrowed my choices. I settled upon Kaboom.

Since most people unfortunately do not have paddle controllers for their computers, the motion of the catch buckets is determined by the side-to-side motion of the mouse. The only other input required is for starting, pausing, and reseting the game. All of these functions are provided by the escape key.

I have improved my core code and the game should now run on recent versions of Internet Explorer (IE9, which is not available for Windows XP, only Windows Vista and Windows 7). However, I do this for fun and I use a MacBook. Finding a Windows PC to test code on is more like work than fun, so my program could have some shortcomings in this regard.


As always, enjoy!
Published: 2011-07-08