Complete HTML5 Concentration game made with PIXI.js

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.