HTML5 Game Development with Phaser

Codecademy Team
Learn about HTML5 game development with one of the most popular frameworks, Phaser!

The internet is for many things, but it has nearly always been for games. And while the days of iconic Flash games like Line Rider and The Helicopter Game are behind us, a new world of HTML5 games has taken hold. Leading the way in desktop and mobile HTML5 game development has been Phaser, a free 2D framework for making a new generation of addicting browser games.

Created by Photon Storm in 2013, Phaser was designed as an open source HTML5 game framework that made it easy for developers and novices to create their own interactive, attractive, and fun browser games. A variety of HTML5 game frameworks existed before Phaser, but the team at Photon Storm focused on designing a framework that worked equally well on mobile browsers as well as desktops, tapping into the increasingly expanding mobile market. Thus any games you develop with Phaser will work across desktop and mobile platforms with efficiency, and can even be compiled into iOS and Android apps!

To get started with Phaser, all you need to know is basic HTML and JavaScript. This is because Phaser is a JavaScript library, and will allow you to add interactivity and graphics to a webpage in the form of a fun and exciting game! In order to render visually beautiful games, Phaser relies on two technologies, Canvas and WebGL. Canvas is an HTML element supported by all modern browsers that allows for the creation of in-browser graphics, drawn from instructions often given in JavaScript. By pairing Canvas with WebGL, a powerful JavaScript API for rendering interactive graphics, Phaser can help you create visually pleasing environments for gamers to play in.

Phaser is loved by game developers across the internet for its ease of use and variety of features. For creating dynamic games, Phaser can handle multiple input options including keyboard, mouse, and multi-touch, with support for tracking up to 10 independent points of contact! And when it comes to the in-game physics that determine how characters and objects move and interact, Phaser provides multiple built-in options including classic Arcade Physics and Ninja Physics, while also allowing for customized physics to create the world of your imaginations.

Are you ready to create your own addicting games with Phaser? Get started with Phaser by setting up your environment for development and then learn how to create your first Phaser game!

Looking for some inspiration? Check out these popular Phaser games on itch.io or featured games from Phaser, some of which you may have already played.

If you are looking to brush up your HTML and JavaScript skills before diving into game development with Phaser, check out our Web Development Path!