1. Introduction
  2. Draw a Circle
  3. Add Some Color
  4. Action
  5. Library: an Interlude
  6. Bounce
  7. Add a Paddle
  8. The Keyboard
  9. The Mouse
  10. The Bricks
  11. Finishing Touches
  12. Coda

Introduction

Welcome! In this tutorial, we're going to create a breakout clone that you can play in your browser, using javascript and the <canvas> element.

In order to use this tutorial, you'll need a browser that supports the <canvas> element.

Before you read any further, click on the "run code" button on the left to play the game that we'll end up creating.

On every page, you'll be able to click the "run code" button to run the code we've developed so far. Every page besides this one has an editor in it containing the javascript code that will be run in the same box as the game as soon as you click the button. You can make changes to the code, and see the results instantly by clicking the "run code" button.

In order to make our lives easier, I've included the jQuery framework in every page, which extends javascript in your browser with some useful methods.

If you have any comments or questions, feel free to leave a comment on the "comments" tab.

next