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.
All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:
- Create the Canvas and draw on it (en-US)
- Move the ball (en-US)
- Bounce off the walls (en-US)
- Paddle and keyboard controls (en-US)
- Game over (en-US)
- Build the brick field (en-US)
- Collision detection (en-US)
- Track the score and win (en-US)
- Mouse controls (en-US)
- Finishing up (en-US)
Nota: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, 2D breakout game using Phaser (en-US).
Nota: 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 (en-US).