2D breakout game using pure JavaScript
In this step-by-step tutorial, we create a simple mobile MDN Breakout game written in JavaScript, using pure JavaScript without any external libraries.
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 implementing fundamental game mechanics like canvas manipulation, rendering and moving images, collision detection, control mechanisms, animations and tweens, and winning and losing states.
To get the most out of this series of articles, you should already have basic to intermediate JavaScript knowledge. After working through this tutorial, you should be able to build your own basic Web games.
Note: This guide has a sister guide: 2D breakout game using Phaser. They follow essentially the same steps and arrive at visually identical results.
Lesson details
Next steps
Ok, let us get started! Head to the first part of the series—Initialize the canvas.