Pesquisar na Comunidade
Mostrando resultados para as tags ''Dificuldade''.
Encontrado 1 registro
-
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 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Geany 1.27" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Painel Animado</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="container"> <div class="card" id="card0"> <div class="face back"></div> <div class="face front"></div> </div> <div class="card" id="card1"> <div class="face back"></div> <div class="face front"></div> </div> <div class="card" id="card2"> <div class="face back"></div> <div class="face front"></div> </div> <div class="card" id="card3"> <div class="face back"></div> <div class="face front"></div> </div> // ETC ... </div> <script src="js/script.js"></script> </body> </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; }
