Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lipeco

Tipo um jogo da Memória

Por , em Desenvolvimento frontend

Recommended Posts

Lipeco    0

Lipeco
Postado

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

Evandro Oliveira    331

Evandro Oliveira
Postado

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

Lipeco    0

Lipeco
Postado

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
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Alexandregsv
      Problema com sistema linux
      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
    • PauloFreitaAug1
      Terminal de Comando feito por um Iniciante?!
      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?
    • Eduardo_555
      Erro de redirecionamento com header("Location:")
      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(); ?>
    • Eduardo_555
      Problemas com FONTE nao nativas do windowns
      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.

  Aceito