Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 3.91 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 7 comments

  1. vinay

    on April 5, 2014 at 9:59 am

    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

    on April 5, 2014 at 3:14 pm

    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. MyName

    on April 8, 2014 at 3:47 pm

    Please can you make tutorials for html5 mobile games?

  4. How to create a complete HTML5 “2048? game with Phaser

    on April 9, 2014 at 10:37 am

    […] : This Post is the same on from the blog I follow, emanueleferonato. But there is a catch just after the Post, which I have […]

  5. How to create a complete HTML5 2048 game with Phaser

    on April 9, 2014 at 10:39 am

    […] : This Post is the same on from the blog I follow, emanueleferonato. But there is a catch just after the Post, which I have […]

  6. Dingo

    on May 25, 2014 at 5:53 pm

    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?

  7. 2048 in Phaser | Phaser

    on June 6, 2014 at 10:36 am

    […] Read More […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×