Complete HTML5 Concentration game made with PIXI.js – Adding animation with Tween.js

Some days ago I showed you the basics on PIXI.js by making a simple yet complete Concentration game.

Later, a reader called Bence Dobos improved it by adding some animations made with TweenJS library.

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it. It supports tweening of both numeric object properties & CSS style properties. The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

By adding different types of tweens according to game events (placing tiles, turning tiles, removing tiles), Bence improved the visual appeal of the game.

Try it by yourself:

Click on tiles and try to match them.

And here is the source code with new lines highlighted:

As usual you can also download the entire project, libraries included.

  • MC

    it demo doesn’t work

  • Emanuele Feronato

    fixed! Thank you!!

  • I really liked working with Pixijs and Tweenjs.

  • Great example. But you got the wrong TweenJS :)
    Your example has . But what you describe in the blog is from CreateJS suite.

  • Amy

    sorry,why am i meet that”Uncaught TypeError: Cannot convert object to primitive value”. oh,`