Painel Animado

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. O que eu deveria fazer no meu código para implementar isso? Agradeço a todos. //Fiz o arquivo HTML ``` Painel Animado

// ETC ...

``` // 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; } ``` ![imagem](https://forum.imasters.com.br/monthly_2019_07/Exemplo.jpg.22a225aa5a0ad83af72235f6eadfab13.jpg)

Lipeco

Tipo um jogo da Memória