# The basics of an HTML5 3D Concentration game made with Babylon.js

Earlier this week I showed you the creation of a 3D Sokoban level with Babylon.js, now it’s time to create something interactive, like a Concentration game.

In this step, I will only focus on the creation and selection of a single tile, but the topics covered are quite a number and pretty advanced, such as:

* Texture mapping
* Using different textures on different meshes of the same body
* Directional lights
* Selection of bodies with the mouse
* Animations and keyframes

This is what you are going to build:

Click on the yellow tile to turn it and reveal its hidden color.

The concept behind the script continues where the creation of 3D Sokoban level with Babylon.js ended, so I recommend to start from the previous example if you are new to Babylon.

The new, fully commented content of game.js used to make this example is:

```// just a Boolean variable to say if we picked the tile
var picked=false;
// identifying the canvas id
var canvas = document.getElementById("gameCanvas");
// creation of the engine itself
var engine = new BABYLON.Engine(canvas,true);
// attaching a scene to the engine. This is where our game will take place
var scene = new BABYLON.Scene(engine);
// adding a little fog to the scene, to give some kind of "depth" to the scene
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
// the density is very high, so a low value is recommended
scene.fogDensity = 0.05;
// creation of a camera, the type is "AcrRotate".
// this mean the camera is bound along two arcs, one running from north to south, the other from east to west
// the first argument is the came of the camera instance
// the second argument is the angle along the north-south arc, in radians (3 * Math.PI / 2)
// the 3rd argumentis the angle along the east-west arc, in radians (3*Math.PI/4)
// the 4th argument is the radius of such arcs (20)
// the 5th argument is the camera target (BABYLON.Vector3.Zero()) in this case the origin
// finally, the scene where to attach the camera ("scene")
var camera = new BABYLON.ArcRotateCamera("camera",3 * Math.PI / 2, 11*Math.PI/16, 20, BABYLON.Vector3.Zero(), scene);
// adding touch controls to camera, that's where hand.js come into play
camera.attachControl(canvas, false);
// we need a directional light in order to cast a shadow
var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(5,0,20), scene);
light.position = new BABYLON.Vector3(1,1,-10);

// this is the table material. We will map an image called "wood.jpg" on it
var tableMaterial = new BABYLON.StandardMaterial("tableMaterial", scene);
tableMaterial.diffuseTexture = new BABYLON.Texture("wood.jpg", scene);

// card material will be made with 2 different materials.
// The first material is "cardMaterial", a yellow color
var cardMaterial = new BABYLON.StandardMaterial("cardMaterial", scene);
cardMaterial.diffuseColor = new BABYLON.Color3(1,1,0);
// the second material is "cardBackMaterial", a purple color
var cardBackMaterial = new BABYLON.StandardMaterial("cardBackMaterial", scene);
cardBackMaterial.diffuseColor = new BABYLON.Color3(1,0,1);

// with these two colors in mind, let's built a multi material
var cardMultiMat = new BABYLON.MultiMaterial("cardMulti", scene);
// here is how we push the materials into a multimaterial
cardMultiMat.subMaterials.push(cardMaterial);
cardMultiMat.subMaterials.push(cardBackMaterial);
// this is the content of our multi material - 0: CardMaterial, 1: CardBackMaterial

// THE TABLE
var table = BABYLON.Mesh.CreateBox("table", 10, scene);
table.scaling.z = 0.025;
table.scaling.x = 2;
table.material=tableMaterial
// we must specify that the table is receving shadows

// THE CARD
var card = BABYLON.Mesh.CreateBox("card", 2, scene);
card.scaling.z = 0.125;
card.position = new BABYLON.Vector3(0,0,-0.25);
// defining two different meshes, one for the bottom face and one for the rest of the card
card.subMeshes=[];
// arguments of Submesh are:
// 1: the index of the material to use
// 2: the index of the first vertex
// 3: the number of verices used
// 4: index of the first indice to use
// 5: the number of indices
// 6: the main mesh
card.subMeshes.push(new BABYLON.SubMesh(0, 4, 20, 6, 30, card));
card.subMeshes.push(new BABYLON.SubMesh(1, 0, 4, 0, 6, card));

// finally assigning the multi material to the card
card.material=cardMultiMat

// attaching the light to shadow generator
// here is how we say the card should cast shadows

engine.runRenderLoop(function () {
scene.render();
});

// a simple click listener
// with "scene.pick" we can obtain information about the stuff we picked/clicked
var pickResult = scene.pick(evt.clientX, evt.clientY);
// if we haven't already picked anything and we are picking a mesh and that mesh is called "card"...
if(!picked && pickResult.pickedMesh!=null && pickResult.pickedMesh.name=="card"){
// set "picked" to true as we won't be able to pick it again
picked=true;
// let's start the animation
var moveAnimation = new BABYLON.Animation(
"moveAnimation", // name I gave to the animation
"position.z", // property I am going to change
30, // animation speed
BABYLON.Animation.ANIMATIONTYPE_FLOAT, // animation type
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT // animation loop mode
// play with BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE,
// BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
// BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

var rotateAnimation = new BABYLON.Animation(
"rotateAnimation",
"rotation.y", // this time I rotate the tile around y axis
30,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

// now let's add keyframes to our animations
var moveKeys = [
{
frame: 0,
value: -0.25
},
{
frame: 20,
value: -2
}
];

var rotateKeys = [
{
frame: 0,
value: 0
},
{
frame: 20,
value: 0
},
{
frame: 40,
value: Math.PI
}
]

moveAnimation.setKeys(moveKeys);
rotateAnimation.setKeys(rotateKeys);

// adding animations to the card
card.animations.push(moveAnimation);
card.animations.push(rotateAnimation);

// launching animation
scene.beginAnimation(card, 0, 40, true);
}
});```

As you can see, everything is easy and intuitive with Babylon, next time I will show you a complete 3D Concentration game, meanwhile download the source code, with all required libraries.

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 10000000
// 2 Cars
// 2048
// Avoider
// Ballz
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Breakout
// Bricks
// Columns
// CubesOut
// Dots
// DROP'd
// Dudeski
// Eskiv
// Filler
// Fling
// Globe
// HookPod
// Hundreds
// InkTd
// Iromeku
// Lumines
// Magick
// MagOrMin
// Maze
// Memdot
// Nano War
// Nodes
// o:anquan
// Ononmin
// Pacco
// Phyballs
// Platform
// Poker
// Pool
// Poux
// Pudi
// qomp
// Racing
// Renju
// SameGame
// Security
// Sling
// Slingy
// Sokoban
// Splitter
// Sproing
// Stack
// Stairs
// Stringy
// Sudoku
// Tetris
// Threes
// Toony
// Turn
// TwinSpin
// vvvvvv
// Wordle
// Worms
// Yanga
// Zhed
// zNumbers