Gamedev Phaser Content Kit

Step-by-step tutorial split into 10 lessons

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.

Here's the list of the articles:

  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

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

You can also go back to the Content Kit's index page.