Ir para conteúdo
Lipeco

Tipo um jogo da Memória

Recommended Posts

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

 

Exemplo.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

troque as...
 

13 horas atrás, Lipeco disse:

 


			<div class="face back"></div>

 

...

Por

 

<img class="face back" src="imagens/verso1.jpg" />
<img class="face back" src="imagens/verso2.jpg" />
...

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia, consegui, que genial, nem pensei nisso, mas deu só um problema, quando eu viro a carta a outra imagem sai do lugar, mas vou ver o código daqui a pouco, mas muito obrigado amigo, que ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Alexandregsv
      Então galera bom dia?
       
      Sou novo aqui estou com problema com o sistema linux!
       
      Não consigo iniciar o computador aparece na tela O SEGUINTE (  Welcome to localhost , usuario  ao lado aparece userrname e Passord:
      e não lembro a senha.
       
      Se alguem poder me ajudar desde já obrigado
    • Por PauloFreitaAug1
      Olá, Sou Médio em C++, sei das noções básicas da linguagem, mas queria saber como Criar um Terminal de Comando, onde podemos digitar Comandos e ele Responde com alguma coisa, acho que isso não é tão avançado assim não é?! pois o cmd só tem 296kb! Tenho um Código aqui, antes meu Terminal parava de funcionar, não dava certo, mas agora eu consertei, mas não consigo consertar este código, o programa não processa os if, só processa o primeiro, e ainda assim, se for colocar um comando, só pode colocar um, então o programa finaliza!
      aqui está o código, mudei os if pelo switch (o "programa" está em beta, irei acrescentar mais comandos!):
      #include <iostream> #include <stdlib.h> #include <cstdlib> #include <stdio.h> #include <conio.h> #include <time.h> using namespace std; int sda; bool tdg; int main() { sda == 1, 2, 3, 4; string loc = "Source:\Dalt\, Source:\NMOS\, EDH:\s_alt\new\""; char comandos; { char DIA; char BinS; char Undo; char Set; char Alt; char Ajuda; printf("User&InternalSource**>"); cin >> comandos; cin.ignore (); switch(comandos) { case 1: cin >> DIA; cout << "O Diagnostico Interno Alinhado processou um total de "; cout << sda; cout << " Fontes Alternadas"; break; case 2: cin >> BinS; tdg = true; cout << "A Fonte foi Parada, Recarregando Recursos..."; return 0; break; case 3: cin >> Alt; tdg = false; cout << "A Fonte Iniciou, Carregando Variaveis..."; break; case 4: cin >> Undo; system("cls"); break; case 5: cin >> Ajuda; cout << "DIA - Diagnostico Interno\n\nUndo - Desfazer\n\nBinS - Parar a Fonte\n\n Alt - Iniciar a Fonte\n\n"; break; case 6: cin >> Set; cout << "Selecione o Local da Nova Fonte: Source:\Dalt\\n\n Source:\NMOS\\n\n ou EDH\s_alt\new\ \n\n"; cin >> loc; break; return 0; case 7: cin >> loc; cout << "Fonte Posicionada! \n\n"; cout << "Carregando a Fonte... \n\n"; break; return 0; } system("pause"); return 0; } } Minha Pergunta é: Como fazer um Programa estilo CMD, um Terminal de Comando, ou Processador de Comandos?
    • Por Eduardo_555
      Olá bom dia!!
       
      Pessoas do fórum.
       
      Finalizei a programação de uma pagina da internet, quando ela estava na minha maquina rodando com o xampp, estava tudo ok funcionava tudo bem. porem agora upei a mesma para um servidos online para colocá-lo online, porem agora sempre que vou usar o lugar onde efetuo o login no site para publicar noticias ele da o seguinte erro.
       
      Warning: Cannot modify header information - headers already sent by (output started at /home/aprsoluc/public_html/bd/funcoes_usuario.php:32) in /home/aprsoluc/public_html/valida.php on line 16
       
      Vi na net por ai que ocorre porque o session_start(), e os cokies e os header("Location: ...") devem vir em primeiro lugar no código, porem no meu caso é praticamente impossível o header vir em primeiro lugar , visto que o mesmo esta dentro de um if e else, tentei criar uma função e colocá-la em primeiro lugar e depois apenas chamar dentro do if e else, porem continua igual.
       
      E ai como vocês contornam este erro maldito.??????
       
      Aqui o codigo onde esta dando o erro!!
      <?php require_once("bd/funcoes_usuario.php"); require_once("bd/conexao.php"); $email = $_POST["email"]; $senha = $_POST["senha"]; $usuario = buscausuario($conexao, $email, $senha); if($usuario != NULL){ logausuario($email); header("Location:restrito.php"); } else{ $_SESSION["danger"] = "Senha ou login incorretos."; header("Location:login.php"); } die(); ?>
    • Por Eduardo_555
      Olá
       
      Desenvolvi uma pagina, porem usei uma fonte nao nativa do windonws ou seja ela nao vem previamente instalada em todos os computadores.
       
      oque acontece, quando abro a pagina, em um pc onde a fonte nao esta intalada, ele nao a carrega como fasso pra corrigir o problemas,
       
      sem que o usuario teha de baixar a fonte e instalala manualmente??????
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.