{{IncludeSubnav("/en-US/docs/Games")}} {{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}
In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript and 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 machanisms, 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.
Lesson details
All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:
- Initialize the framework
- Scaling
- Load the assets and print them on screen
- Move the ball
- Physics
- Bounce off the walls
- Player paddle and controls
- Game over
- Build the brick field
- Collision detection
- The score
- Win the game
- Extra lives
- Animations and tweens
- Buttons
- Randomizing gameplay
Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects - Phaser is currently the most interesting choice. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.
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's get started! Head to the first chapter — Initialize the framework.
{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}