4-5: Breakout

CS50 has a hacker version of Breakout as part of unit 3, however it requires using the appliance to have access to certain graphical libraries rather than cloud9. Since we can’t use the appliance in class, I’ve translated this into html/javascript using HTML canvas.

As in many CS50 problems, some of the code is written for you and some of it is listed as “TODO”, meaning you need to complete the code in that section to make it operational.

Before getting started, here is a bit of background on breakout, as CS50 explains in their version of this pset.


One day in the late summer of 1975, Nolan Bushnell [founder of Atari and, um, Chuck E. Cheese’s], defying the prevailing wisdom that paddle games were over, decided to develop a single-player version of Pong; instead of competing against an opponent, the player would volley the ball into a wall that lost a brick whenever it was hit. He called [Steve] Jobs into his office, sketched it out on his little blackboard, and asked him to design it. There would be a bonus, Bushnell told him, for every chip fewer than fifty that he used. Bushnell knew that Jobs was not a great engineer, but he assumed, correctly, that he would recruit [Steve] Wozniak, who was always hanging around. “I looked at it as a two-for-one thing,” Bushnell recalled. “Woz was a better engineer.”

Wozniak was thrilled when Jobs asked him to help and proposed splitting the fee. “This was the most wonderful offer in my life, to actually design a game that people would use,” he recalled. Jobs said it had to be done in four days and with the fewest chips possible. What he hid from Wozniak was that the deadline was one that Jobs had imposed, because he needed to get to the All One Farm to help prepare for the apple harvest. He also didn’t mention that there was a bonus tied to keeping down the number of chips.

“A game like this might take most engineers a few months,” Wozniak recalled. “I thought that there was no way I could do it, but Steve made me sure that I could.” So he stayed up four nights in a row and did it. During the day at HP, Wozniak would sketch out his design on paper. Then, after a fast-food meal, he would go right to Atari and stay all night. As Wozniak churned out the design, Jobs sat on a bench to his left implementing it by wire-wrapping the chips onto a breadboard. “While Steve was breadboarding, I spent time playing my favorite game ever, which was the auto racing game Gran Trak 10,” Wozniak said.

Astonishingly, they were able to get the job done in four days, and Wozniak used only forty-five chips. Recollections differ, but by most accounts Jobs simply gave Wozniak half of the base fee and not the bonus Bushnell paid for saving five chips. It would be another ten years before Wozniak discovered (by being shown the tale in a book on the history of Atari titled Zap) that Jobs had been paid this bonus….

Steve Jobs— Walter Isaacson ’74

Breaking Out

Your challenge for this problem is to implement the same game that Steve and Steve did, albeit in software rather than hardware. That game is Breakout.

The version I’ve created for you to work on uses html, javascript and canvas, which is a way of creating frame by frame animation used by many javascript games.

You may download the distribution code by copying and pasting this into your terminal window:

wget https://dl.dropboxusercontent.com/u/26740080/breakout_todo.html

In order to understand the various parts of this, I highly recommend going through a walkthrough.

You can also look through the canvas tutorial: www.w3schools.com/canvas/default.asp.

When you have it working it will look like this.


Once you complete the code, you may add your own feature/colors/effects and personalize it!