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 basic Web games with Phaser.
Note: This guide has a sister guide: 2D breakout game using pure JavaScript. They follow essentially the same steps and arrive at visually identical results.
We have chosen Phaser for this project because it has good browser support, an active community, 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.
Lesson details
Next steps
Ok, let us get started! Head to the first part of the series—Initialize the framework.