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
- 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.