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

Emanuele Feronato Game design, HTML5, Javascript, 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

Comments 7

  1. vinay

    How to add touch event on above game.
    Like:
    swipe down -> Equivalent to Key S
    swipe up -> Equivalent to Key W
    swipe right -> Equivalent to Key A
    swipe left -> Equivalent to Key D

  2. vinay

    I used Hammer.js for swipe but it is jerky and slow, Is there any way I can implement swipe functionality.
    var hammertime = Hammer(element).on(“swipeup”, function(event) {
    moveUp();
    });

  3. Pingback: How to create a complete HTML5 “2048? game with Phaser

  4. Pingback: How to create a complete HTML5 2048 game with Phaser

  5. Dingo

    Hi,

    I have tried to launched your code with as3. but unfortunately I can’t make it work well.
    Do you have as3 example for this coed?

  6. Pingback: 2048 in Phaser | Phaser

Leave a Reply

Your email address will not be published. Required fields are marked *