Ir ao conteúdo
  • Cadastre-se
Lipeco

Javascript Jogo da memória, dificuldade em distribuir as cartas

Posts recomendados

Estou tentando fazer um jogo da memória, porém não estou conseguindo distribuir minhas cartas certas, tenho 24 cartas, onde gostaria de dividir em 3 linhas, em cada linha ter 8 cartas.

 

(function(){
    comecar();
    
    function comecar(){
       for(var i = 0; i < 24; i++){
           var card = document.querySelector("#card" + i);
           	card.style.left = (i % 8 === 0) ? 5 + "px" : (i % 8) * 90 + 5 + "px";
			card.style.top = i < 8 ? 5 + "px" : 250 + "px";
			card.style.top = i < 24 ? 5 + "px" : 250 + "px";
			
       } 
    }
}());

Quando uso essa linguagem eu consigo apenas colocar 8 em cima e 8 embaixo, mas as que faltam eu não consegui de jeito nenhum.

Alguém poderia me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lipeco Bom, se você tem 24 card e quer dividir eles em 3 linhas, seguindo a matemática 24 / 3 = 8, sendo assim cada linha vai ter 8 card, você faz o alinhamento dos card na linha usando left de acordo com o resto da divisão por 8 do valor do loop, até ai de boa, porém quando você faz o alinhamento da altura de cada linha você só define duas linha e não 3.

card.style.top = (i < 8) ? 5 + "px" : 250 + "px";
card.style.top = (i < 24) ? 5 + "px" : 250 + "px";

No seu código você define duas alturas uma contendo 8 cards e a outra 16 cards, para resolver isso bastar você definir uma terceira altura indo de 8 ate 16;

card.style.top = (i < 8) ? 5 + "px" : 250 + "px";
card.style.top = (i > 8 || i < 16) ? 250 + "px" : 495 + "px";
card.style.top = (i > 16) ? 495 + "px" : 495 + "px";

Você pode melhorar esse código usando um if, else if, else.

if (i < 8)
{
card.style.top = "5px";
}
else if (i > 8 || i < 16) 
{
card.style.top = "250px";
}
else
{
card.style.top = "495px";
}

Você também pode usar o css(flex-box ou css-grid) para alinha seus cards

 

Vou deixar um exemplo mais pratico para alinha seus card usando css(flex-box) é jquery(3.4.1)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jogo de cartas</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <style>

            #desktop{
                display: flex;
                flex-direction:row;
                flex-wrap: wrap;
                justify-content: center;
            }

            [id|=card]{
                position: relative;
                height: 100px;
                overflow: hidden;
            }

            [id|=card] > div{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                padding: 10px;
                margin: 1px;
                display: block;
                background: #000;
                color: #fff;
                text-align: center;
                font-size: 25px;
            }

        </style>
    </head>
    <body>
        <div id="desktop">
        </div>
        <script>
            var desktop, numeroCard, cards, colunas;
            $(function(){
                numeroCard = 24;
                colunas = 8; // Número de colunas
                desktop = $("#desktop"); // Elemento com os card
                for(i = 0; i < numeroCard; i++){ // Adicionando card de acordo com a váriavel numeroCard
                    desktop.append(`<div id="card-${i+1}"><div>${i+1}</div></div>`);
                }
                valor = desktop.find("[id|=card]"); // Selecionando os card dentro do elemento pai
                for (i = 0; i < valor.length; i++) // Iniciando um loop com o número de card dentro do elemento pai
                {
                    $(valor[i]).css("width", (100 / colunas) + "%"); // Adicionando o tamanho de cada card de acordo com os número de colunas
                }
            });
        </script>
    </body>
</html>

image.thumb.png.8c19e9f64b2e90280da6b3f460910f67.png

  • Curtir 1
  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
8 horas atrás, GabrielSennaMs disse:

Você pode melhorar esse código usando um if, else if, else.


if (i < 8)
{
card.style.top = "5px";
}
else if (i > 8 || i < 16) 
{
card.style.top = "250px";
}
else
{
card.style.top = "495px";
}

Na verdade, você e ele já estavam usando If else Só que como operador condicional ternário.  Realmente fica muito mais legível do que o monte de if, else e etc.

 

Quanto o segundo exemplo, realmente gosto dessa sugestão! Bom trabalho :thumbsup:

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui fazer , mas agora eu queria fazer o seguinte, cada carta tem uma frente, mas o verso é diferente, ao clicar em uma carta o verso vai ser uma imagem diferente de outra carta, eu consegui fazer com o verso igual pra todas, mas agora quero a parte do verso diferente, não tenho ideia de como fazer, segue o codigo..

//estrutura de atribiução das imagens aos card
	for(var i = 0; i < 24; i++){
		//cria um objeto img com um src e um id
		var img = {
			src: "img/" + i + ".png",
			id: i%8
		};
		
		//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 < 24; i++){
			var card = document.querySelector("#card" + i);
			card.style.left = i % 8 === 0 ? 5 + "px" : i % 8 * 82 + 5 + "px";
			card.style.top = i < 8 ? 5 + "px" : (i < 16 ? 208 + "px" : 413 + "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");
	}
}());

 

 

@GabrielSennaMs  Caso eu queira mudar, colocar 6 x 6, tentei fazer, mas está dando errado, não consegui fazer.

 

Boa noite,

 

Eu consegui criar um aplicativo "Tipo um jogo da memória", onde eu tenho uma quantidade de carta, e quando eu clico em uma carta, ela vira para o seu verso. Até aí eu consegui, porém, eu gostaria o seguinte, cada carta tem uma frente diferente da outra, então criei as ids diferentes e etc, porém eu só consegui o verso igual para todas as cartas, mas eu gostaria que o verso fosse diferente de todas as cartas, vou colocar um exemplo abaixo e logo após meu código.

Código em 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>
		<div class="card" id="card4">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card5">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card6">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card7">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card8">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card9">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card10">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card11">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card12">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card13">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card14">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card15">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card16">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card17">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card18">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card19">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card20">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card21">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card22">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
		<div class="card" id="card23">
			<div class="face back"></div>
			<div class="face front"></div>
		</div>
	</div>
	
	<script src="js/script.js"></script>
</body>
</html>

 Código em script

 

(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 < 24; i++){
		//cria um objeto img com um src e um id
		var img = {
			src: "img/" + i + ".png",
			id: i%8
		};
		
		//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 < 24; i++){
			var card = document.querySelector("#card" + i);
			card.style.left = i % 8 === 0 ? 5 + "px" : i % 8 * 82 + 5 + "px";
			card.style.top = i < 8 ? 5 + "px" : (i < 16 ? 208 + "px" : 413 + "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");
	}
}());

Código em CSS

 

#container{
	width: 685px;
	height: 625px;
	border: 1px solid #111;
	position: relative;
    margin: 10px auto;
	border-radius: 5px;
    background-color: #708090;
}

.card{
    width: 80px;
    height: 201px;
    position: absolute;
    border-radius: 10px;
    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);
}

 

Exemplo.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lipeco 

 

Para você colocar 6 x 6, você vai ter que aumentar o numero de cads de 24 para 36, já que 6 * 6 = 36, e também vai ter que fazer uma mudança do espaço entre eles.

 

Para colocar um background no verso de cada card você pode coloca um segundo elemento dentro do card, e fazer a troca da posição dele quando acontecer um evento como o onclick.

 

Vou deixar um exemplo de como fazer:

https://codepen.io/morto/pen/RzdddZ

 

image.thumb.png.fcf6ddece91431b3547e44b5578af86c.png

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@GabrielSennaMs   Entendi a parte da distribuição, só não consegui entender a parte do verso fazer diferente.

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





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

GRÁTIS: minicurso “Como ganhar dinheiro montando computadores”

Gabriel TorresGabriel Torres, fundador e editor executivo do Clube do Hardware, acaba de lançar um minicurso totalmente gratuito: "Como ganhar dinheiro montando computadores".

Você aprenderá sobre o quanto pode ganhar, como cobrar, como lidar com a concorrência, como se tornar um profissional altamente qualificado e muito mais!

Inscreva-se agora!