Image may be NSFW.
Clik here to view.
I started working on my version of the Breakout game as a simple exercise to learn Javascript game programming, using HTML5 Canvas for animation.
The way I see it, Breakout is the “Hello World” of Game development. Pretty much everyone does it when they want to learn the basics. It is probably one of the simplest games to develop though you can choose to make this exercise as easy or as challenging as you like.
In the process of building even the simplest versions of this game you learn most of the essential fundamentals for building any Javascript game, namely -
- Drawing primitive objects on the screen using the Canvas element and its Context. (See Introduction to Canvas Tutorial)
- Moving objects by using clearRect() and redrawing the object. (See Animation and Keyboard Input Tutorial)
- Using setInterval() and setTimeout() to animate objects and run a game loop. (See Animation and Keyboard Input Tutorial)
- Capturing keypress, keydown and keyup events and responding to user input. (See Animation and Keyboard Input Tutorial)
- And finally rudimentary collision detection. (See Collisions, Scoring and Sound Tutorial)
- Using HTML5 Audio for sound effects. (See Collisions, Scoring and Sound Tutorial)
- Using bitmaps with drawImage() for better looking graphics.
- Animating arrays of objects simultaneously, each with their own life cycle (like bullets)
I expected this game to be a quick learning experience with limited playable value. I never expected the game to be as much fun as it is. Once I decided to put the game up on my website, the positive feedback that I got was very heartening.
Based on feedback, I have decided to continue adding features and developing the game. If you are interested in game development and the making of this game, you can check out the tutorial series on developing Breakout.
The latest version of the game is available at the Breakout Game page. Please check it out and let me know whether you like it. I would appreciate any suggestions or constructive criticism (as a player or as a developer) – Any bugs or any playability issues that you find.
If you like the game, please do let me know, and do share it with all your friends. You can use the comments form on the game page.
