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

Lipeco · 18 de junho de 2019

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?

GabrielSennaMs · 19 de junho de 2019

@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>

DiF · 19 de junho de 2019

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

Lipeco · 11 de julho de 2019

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

GabrielSennaMs · 12 de julho de 2019

@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