Tipo jogo da Memória

Programação
#1

Boa noite a todos,

Então, estou com dificuldade para completar meu objetivo.

O que eu fiz foi o seguinte, criei um tabuleiro 6x6, onde eu tenho 36 cartas, com frente e com verso, até aí tudo bem, eu consigo ao clicar em uma carta e ela virar para o verso, onde na frente eu tenho diferentes imagens e o verso é apenas uma imagem que serve para todas as cartas, porém o que eu gostaria de fazer agora é que cada verso tenha uma imagem diferente, por exemplo, cliquei na imagem 1, ela vire para o verso 1 e assim sucessivamente. Não tenho ideia de como fazer, alguém poderia dar uma luz? Vou postar uma imagem para ilustrar melhor minha ideia e postarei o código.
Fiz em HTML , CSS e JavaScript, não tenho noção como fazer essa lógica no meu código.
Exemplo

O que eu deveria fazer no meu código para implementar isso?

/Fiz o arquivo HTML

// Javascript Logica

(function(){
//array que armazenará os objetos com src e id de 1 a 8
var images = [];

//estrutura de atribiução das imagens aos card
for(var i = 0; i < 36; i++){
	//cria um objeto img com um src e um id
	var img = {
		src: "img/" + i + ".png",
		id: i%6
	};
	
	//inserer o objeto criado no array
	images.push(img);
}

startGame();

function startGame(){
	//lista de elementos div com as classes front
	var frontFaces = document.getElementsByClassName("front");

	for(var i = 0; i < 36; i++){
		var card = document.querySelector("#card" + i);
		card.style.left = i % 6 === 0 ? 5 + "px" : i % 6 * 117 + 5 + "px";
  

	if (i < 6)
  	{
    	card.style.top = 5 + "px";
  	}
  	else if(i > 5 && i < 12)
  	{
    	card.style.top = 120 + "px";
  	}
  	else if(i > 11 && i < 18)
  	{
    	card.style.top = 235 + "px";
  	}
  	else if(i > 17 && i < 24)
  	{
    	card.style.top = 350 + "px";
  	}
  	else if(i > 23 && i < 30)
  	{
    	card.style.top = 465 + "px";
  	}
  	else if(i > 29 && i < 36)
  	{
    	card.style.top = 580 + "px";
  	}
  
		card.addEventListener("click",flipCard,false);
		
		//adiciona as imagense IDs às cartas
		frontFaces[i].style.background = "url('"+images[i].src+"')";
		frontFaces[i].setAttribute("id",images[i].id);
	}
}

function flipCard(){
	var faces = this.getElementsByClassName("face");

	faces[0].classList.toggle("flipped");
	faces[1].classList.toggle("flipped");
}

}());

//CSS

*{
margin: 0;
padding: 0;
}

body{
background-color: #555;
}

#container{
width: 710px;
height: 697px;
border: 17px solid #111;
position: relative;
margin: 10px auto;
border-radius: 5px;
background-color: #ffffff;
}

.card{
width: 115px;
height: 112px;
position: absolute;
perspective: 600px;
}

.face{
width: 100%;
height: 100%;
position: absolute;
transition: all 1s;
backface-visibility: hidden;
}

.back{
background: url("…/img/verso.png");
}

.back.flipped{
transform: rotateY(180deg);
}

.front{
transform: rotateY(180deg);
}

.front.flipped{
transform: rotateY(0deg);
}

.card:hover{
box-shadow: 0 0 15px #aaa;
}

#2

Como funciona o jogo da memória, você tem que achar os pares iguais, caso não ache, ele volta a ser como era antes.
Sendo assim, te indico a manter 3 matrizes, a primeira com a frente, a segunda com o verso, e a terceira com a que o jogador irá manipular, a partir dai você consegue fazer um controle melhor do que vai acontecer no jogo.

No início você popula a matriz 3 com a matriz 1.
A cada carta selecionada você vai preencher somente aquela posição da matriz 3 com a imagem da matriz 2.
Quando o jogador selecionar as duas cartas você compara se a imagem que está nela são iguais.
Caso o jogador ache o par, a matriz 3 ficaria com o valor da matriz 2, caso seja um par errado ela volta a ter a imagem da matriz 1.

A lógica pode ser feita dessa maneira, escrevi rápido aqui mas se seguir certinho vai funcionar.

Se tiver dúvida posta ai.

1 curtida
#3

Javascript não é Java, atualize a categoria do seu post. :wink:

1 curtida