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.
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;
}
