Creating a Breakout Game With JavaScript

Introduction¶

Breakout is an incredible style of game to implement, because it's core concept is very simple, which allows us to creatively interpret and extend the bounds of the genre. Games like Arkanoid on the Atari allow the user to control a paddle and volley a ball towards a wall of bricks. The more bricks the player destroys, the more points he claims! Modern games such as Chak's Temple and Ricochet really test the limits of the "brick" concept, and add a wide variety of levels, powerups, and event bullets! The incredible talk Juice it or Lose it uses Breakout to demonstrate how adding effects and polish can turn a mundane game into an exciting experience for the player. Perhaps it will give you some ideas of how to expand on this game!

So now that I've shown some impressive examples of Breakout games, let's look at what we will be making. The goal of this excercise is to get another simple and achieveable game under your belt as you learn more and more difficult game logic and common solutions to common game development problems. Coding this game completely from scratch will help you to understand the core concepts, although I do not discourage the use of a game engine or libraries to do some of the heavy-lifting for you when you want to make a more complex game.

Target audience¶

This is my second course about programming web games, so I am building on top what we learned by creating Snake. If you are a beginner at programming in JavaScript or a newcomer to developing HTML5 games, I highly encourage you start with my Snake course. I have sprinkled links to the JavaScript documentation on the Mozilla Developer Network throughout this course in case you run across a JavaScript concept that you are not familiar with.