Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

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

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 11

  1. vinay

    How to add touch event on above game.
    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) {

  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


    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

  7. Anna

    You know, there is a little bug, in original game is very important that you check all tiles in a row in opposite direction of moving like if you press “D” you should check from 3 to 0 in a row.. if you have this
    2 2 2 4
    you will get
    0 0 8 4, that is wrong.. I also tried to implement this in as3, but then I found this mistake and I don’t know how to fix it:)

    1. Post

Leave a Reply

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