Breakout
Bill Mill has created a fantastic tutorial for any canvas programming wannabes, where he runs through the steps needed to create a Breakout clone. The tutorial consists of 12 very clear and concise steps, where you can view a demo of how your project should look so far.
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.
Breakout clone
Thanks Bill for spending the time creating this detailed tutorial!
Comments
smoe
I don’t get it…whats the framework that I start out with?
Posted on August 19, 2010
Xoli12
can´t load the pages & need help
Posted on September 23, 2010
yserra
pretty nice and simple breakout, somehow it looks as if a new game world is to be recreated in the canvas sea !
Posted on December 24, 2010
Chris
@smoe & @Xolie12: The Framework(?) is JQuery and all the example-code has to be placed in the “$(document).ready()”-Function. If you don’t know how to do this, I recommend you start with this canvas-tutorial:
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
Hope that helps!
Posted on February 16, 2011
emurmur
Works great on Chrome build 11.0.696.50 beta on Windows Vista.
Really nice format for a tutorial. The ability to immediately change the javascript and re-run the app is really, really great.
The breakout game is a very good, simple set of code for a fun game. This is a great set of content to build a canvas tutorial around.
There are more advanced canvas performance topics that would be worth at least mentioning. For instance, dirty rectangles, so the background does not have to be completely redrawn each time. Another would be the use of images, rather that graphics primitives. However, so a part 2 would be welcome.
Very nice. Good work. Thanks for creating this tutorial.
Posted on April 25, 2011
KAWNER
Fantastic tutorial! I have been waiting for a good tutorial to explain how to control multiple objects.
Posted on July 12, 2011
Related demos