I'm developing this game for a mobile application, along with ionic, angular2, CLI, among others. However the logic is totally with javascript but since every game has its rules I have stuck in the part where the player can not "turn" more than two cards and verify if the two cards that have been turned are equal, if they are the same they remain turned and if they are not turned down at the same time.
For the player to turn the cards I changed the z-index by script when clicking. The images that start appearing are with the z-index = 999, already the images of the upturned charts begin with the z-index = 998, when the images with the z-index = 999 are clicked I passed a function that exchanges z- index it to 997 causing the images of the "face" cards to appear as in the code below:
// Array com todas as imagens possiveis
var imagensArray=[
'assets/img/1.jpg',
'assets/img/2.jpg',
'assets/img/3.jpg',
'assets/img/4.jpg',
'assets/img/5.jpg',
'assets/img/6.jpg',
'assets/img/7.jpg',
'assets/img/8.jpg',
'assets/img/9.jpg',
'assets/img/10.jpg'
];
// Função que cria as cartas da fase 1
function criaTabuleiro1(){
var qtdCartas = 4;
for(var i=1; i<=qtdCartas; i++){
var cartas = document.createElement("img");
cartas.src = "assets/img/carta.jpg";
cartas.style.marginRight = "10px";
cartas.style.position = "relative";
cartas.style.zIndex = "999";
cartas.id = "c" + i;
document.getElementById("cartas").appendChild(cartas);
// função anonima onlick que recebe outra função criada mais abaixo
cartas.onclick = function(){
viraCarta(this);
}
}
// Gera as imagens dar cartas "viradas" aparti do array selecionado
for(i = 0; i < selecionado.length; i++){
var cartasViradas = document.createElement("img");
cartasViradas.src = selecionado[i];
cartasViradas.style.marginRight = "10px";
cartasViradas.style.position = "relative";
cartasViradas.style.zIndex = "998";
cartasViradas.id = "virada" + i;
document.getElementById("cartasViradas").appendChild(cartasViradas);
}
}
// Armazena aleatoriamente 4 cartas das 10 possiveis do array imagensArray
var selecionado = [];
for (var i = 0; i < 2; i++) {
// Escolha aleatoriamente um da matriz de faces
var randomInd = Math.floor(Math.random()*imagensArray.length);
var face = imagensArray[randomInd];
selecionado.push(face);
selecionado.push(face);
imagensArray.splice(randomInd, 1);
}
selecionado.sort(function() {
return 0.5 - Math.random();
});
var qtdCartasViradas = 0;
function viraCarta(e){
var cartaId = e.id;
//Remove do balão clicado a função estourar()
document.getElementById(cartaId).setAttribute("onclick","");
document.getElementById(cartaId).style.zIndex = "997";
qtdCartasViradas += 1;
}.cartas{
width: 310px;
height: 200px;
position: absolute;
}
.cartasViradas{
width: 310px;
height: 200px;
top: 0;
position: absolute;
}<html>
<head>
<title>Jogo memoria</title>
</head>
<body onload="criaTabuleiro1()">
<div id="cartas" class="cartas">
<div class="cartasViradas" id="cartasViradas"></div>
</div>
</body>
</html>Someone could help me in this logic because I have tried and can not know through the code in which card the player is clicking.