2D breakout game using Phaser

In this step-by-step tutorial, we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.

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 Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, 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 simple Web games with Phaser.

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

Lesson details

All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:

  1. Initialize the framework
  2. Scaling
  3. Load the assets and print them on screen
  4. Move the ball
  5. Physics
  6. Bounce off the walls
  7. Player paddle and controls
  8. Game over
  9. Build the brick field
  10. Collision detection
  11. The score
  12. Win the game
  13. Extra lives
  14. Animations and tweens
  15. Buttons
  16. Randomizing gameplay

As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we would suggest that you first work through this series' counterpart, 2D breakout game using pure JavaScript.

After that, you can pick any framework you like and use it for your projects; we have chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework does not provide, you will need some pure JavaScript knowledge.

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Phaser Content Kit based on this tutorial if you want to give a talk about game development with Phaser.

Next steps

Ok, let us get started! Head to the first part of the series — Initialize the framework.