Introduction

Creating a Brick-breaker Game With Phaser is the result of teaching HTML5 game development by example at a local institute, focused on web technologies with a philosophy of teaching concepts, methodologies and standards in a practical way.

This book is intended to be a hands-on introduction to HTML5 game development using the Phaser framework by developing a complete game with well-known mechanics. It is bundled with all the necessary assets, so we can focus on the code and not finding extra resources or developing “programmer artwork”.

What you will learn

By the end of the book, you’ll have learned to:

  • Set up an organized file structure for developing games for the web
  • Create a blank game and test everything runs OK
  • Import images and sounds
  • Show and move sprites on the screen
  • Manage a group of sprites
  • Play sound effects and background music
  • Show text on the screen with custom web fonts
  • Handle touch and keyboard input
  • Detect collisions and use the Arcade physics system
  • How to start using the particle system
  • Manage game states
  • Create a “loading” screen
  • Optimize the game for mobile devices

You can play a version of this game on itch.io, where you can also find the Android version.

Target audience

It is aimed to programmers with some experience with JavaScript and want to learn by doing (and finishing). It is not a guide to JavaScript, but each step is explained and the source code is well-commented so you can get it right away and keep focusing on the big picture.

Development tools

The Phaser web site has a well-documented section on how to get started. However, I invite you to test and develop the code from this book using the Brackets editor. The code was developed and tested on it, and works well on Windows, Linux and Mac. Besides, testing the examples is far too easy:

  1. Install Brackets
  2. Make sure you have Chrome / Chromium browser installed
  3. In the menu bar, go to File -> Open Folder…
  4. Locate a directory with an index.html file. For example: brick-breaker-phaser/01core_mechanics/01paddle/
  5. Select it
  6. In the menu bar, go to File -> Live Preview

There are other editors and tools, but the coding-testing pipeline on Brackets is very straightforward if you’re new to web development.

Acknowledgements

The following people helped in the development of this book or the game associated with it:

  • Richard Davey - creator of Phaser
  • Christian Chomiak - editing and title page
  • Kenney - artwork and some sound effects
  • Joe Powell, courtesy of Freesound - background music (Electric Air)
  • Sergio Marin, and the whole team at Escuela Web, for giving me a place to unite two of my passions; game development and teaching
  • Luis Miguel Delgado - content review
  • Ángel León - technical review

Up next

0 Project setup