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.

Complete HTML5 Concentration game made with PIXI.js

Emanuele Feronato Game design, HTML5, Javascript

Pixi.js is an HTML5 rendering engine whose strength is speed. When it comes to 2D rendering, according to the official website Pixi is the fastest there is.

in this post I won’t test the speed, but I am going to create an HTML5 Concentration game using PIXI as renderer in order to show you how to render basic games.

Don’t forget Concentration is one of the games you MUST be able to make in less than a day with any engine (refer to this post for more information).

Icons are a free set downloaded from Elegant Themes which I packed into a texture atlas with TexturePacker (you can find a review here).

Looking at the fully commented script you will learn how to:

* Import a texture Atlas
* Add Sprites and Display Object containers
* Interact with the mouse
* Add filters
* Render the state

Not that bad for such an easy game.

Play with it:

You should know how to play: just pick tiles with the mouse and clear the stage by matching tiles.

And this is the fully commented source code:

You can also download the source code with all required images and files.

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 17

  1. Pingback: Complete HTML5 Concentration game made with PIXI.js – Adding animation with Tween.js - Emanuele Feronato

  2. Colo

    Hi Emanuele ! thanks a lot for this tutorial.
    It’s a shame that there are not many tutorials of pixiJS yet.
    regards.

  3. Pingback: Articles and Resources for Practicing Web-Based Game Design » CSS 3 & HTML 5 Links und Infos

  4. WC Leung

    The shuffling code in the sample is not good enough. To do a full random shuffling, do the following instead:

    for(i=1;i<48;i++){
    var from = Math.floor(Math.random()*(i+1));
    var to = i;
    var tmp = chosenTiles[from];
    chosenTiles[from]=chosenTiles[to];
    chosenTiles[to]=tmp;
    }

    Note: It is obvious that the code can be simplified further. I just keep the original variables so readers can compare the shuffling methods with ease.

  5. Pingback: HTML5 - Artysmedia

  6. Pingback: Creando con HTML5 - Artysmedia

  7. paul

    Interesting , but why if we change the color of the items we can see all of them , only works if the items are black? is a simple custom change .

  8. abozanona abozanona

    It’s not working. I tried to run it in chrome and mozilla,windows ans ubuntu.and in each time i find a different error in the console!

  9. Pingback: Complete HTML5 Concentration game made with PIXI.js 3 | iPotaje.es

  10. Pingback: Juego de Concentración completo en HTML5 con PIXI.js 3 | iPotaje.es

Leave a Reply

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