Complete 3D HTML5 Concentration game made with Babylon.js

Back talking about Babylon.js after the creation of a Sokoban level and the basics of a Concentration game, here we go with a complete Concentration game.

First, have a look at the game:

You should know the rules, pick two cards with the same color.

If you followed the previous Babylon.js posts, you should already know the concepts behind this game, as the only new feature visible in this game is the callback when an animation ends.

This complete list of things you will be using in the creation of this game is interesting, and you will learn how to:

* Create a scene
* Create an environmental fog
* Create a Box primitive
* Apply a diffuse color to a primitive (that is, paint it the color you want)
* Modify of the size of primitives
* Use texture mapping
* Use different textures on different meshes of the same body
* Create directional lights
* Select bodies with the mouse
* Create animations and keyframes
* Handle animation callbacks

I removed the shadow casting because I will add them in next project, along with particles.

This is the complete source code of game.js, refer to the first example to see how to set up a Babylon.js project.

Animation callbacks are used at lines 240 and 275.

Download the source code of the full project

  • Wow, very interesting – was a popular 2048 android game developed with the same technology? it looks very much alike