In this tutorial, we will make a breakout game, starting from an empty canvas embedded in an html page, as described by the code below.
Note the html button calling the function play() above.
This will be the first function we will define.
Inspired by Bill Mill's tutorial, we will create a complete game, from start to finish, adding a few lines at a time. At each stage the game, as it is built, will be available in a window on the right.
This tutorial is broken up in many sections, each introducing a new element in the game. The emphasis is not to write the cleverest, most Object-Oriented code; instead, it is to ensure that each additional step is written in an easy to follow way.
The code that we will write in each section of this tutorial will replace the above line
Ignoring cosmetic issues at first, we will initially focus on creating a playable game, albeit a very primitive one. When this is done, we will improve its appearance and overall quality.
Time to play!
Keep your personal notes here. These notes are stored by your browser on your own computer, and will be available from any page on this site. You can choose to use html syntax for formatting.