Tipo um jogo da Memória
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;
}
Discussão (2)
Carregando comentários...