You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the
<canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.
- Create the Canvas and draw on it
- Move the ball
- Bounce off the walls
- Paddle and keyboard controls
- Game over
- Build the brick field
- Collision detection
- Track the score and win
- Mouse controls
- Finishing up
Note: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, 2D breakout game using Phaser.
Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Canvas Content Kit based on this tutorial if you want to give a talk about game development in general.
Ok, let's get started! Head to the first chapter— Create the Canvas and draw on it.