1
I’m developing this game for a mobile app, along with Ionic, angular2, CLI, among others. However logic is totally with javascript but as every game has its rules I stopped at the part where the player can not "turn" more than two cards and check if the two cards that were turned are equal, if they are equal they remain turned and if they are not turned down at the same time.
In order for the player to turn the cards I changed the z-index by script when clicking. The images that start to appear are with z-index = 999, while the images of the turned cards start with z-index = 998, when the images with z-index = 999 is clicked I passed a function that changes its z-index to 997 making the images of the cards "turned" 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>Could someone help me with this logic because I’ve tried and I can’t figure out which card the player is clicking on.
I dealt with an issue similar to the one of detecting click position in a Resta Um that I did in JS; in this case, I used in fact
<table>because it made sense. If you would like to do a search: https://github.com/jeffque/peg-kitten-solitaire; if you can give a proper answer after reading the code in this repository, answer your question with dignity and I will vote for your own answer– Jefferson Quesado