How to create a complete HTML5 “2048” game with Phaser

Some days ago I showed you ho to create a jQuery-only working game like “Threes” (or “1024?, or “2048?, or…). Now it’s time to do the same game using HTML5 with Phaser framework.

It’s very easy to create tweens and animations, so here what you are about to create:

Play with WASD keys and try to get to 2048, or even higher!!

Before I show you the complete and fully commented source code, keep in mind I used only a white PNG image for the tile and I am storing game field values into a one-dimensional array.

By studying this script you will learn these 10 principles:

* Load graphic assets
* Create Sprites
* Create texts and assign them a style
* Add and remove Sprites to the stage, both as standalone Sprites or as children of existing sprites
* Create Groups
* Sort and loop through groups
* Handle keyboard input
* Create animations using tweens
* Manage callbacks
* Apply color filters to Sprites

A lot of stuff for such a simple game! Here we go:

As usual, you can download the source code of the game with all required libraries