logica.php
(Apenas Leitura)
<?php
$imagensOriginais[] = '01.jfif';
$imagensOriginais[] = '02.jfif';
$imagensOriginais[] = '03.jfif';
$imagensOriginais[] = '04.jfif';
$imagensOriginais[] = '05.jfif';
$imagensOriginais[] = '06.jfif';
$imagensOriginais[] = '07.jfif';
$imagensOriginais[] = '08.jfif';
$imagensOriginais[] = '09.jfif';
$imagensOriginais[] = '10.jfif';
$todasCartas = array_merge($imagensOriginais, $imagensOriginais); // Duplicar
shuffle($todasCartas); // Embaralha o vetor aleatoriamente
?>
index.php
(Apenas Leitura)
<?php
include 'logica.php';
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Jogo da Memória em PHP</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1>Jogo da Memória PHP</h1>
<div class="grade">
<?php
foreach ($todasCartas as $nomeImagem) {
?>
<div class="carta" onclick="virarCarta(this)">
<div class="conteudo-carta">
<div class="frente" style="background-image: url('img/<?php echo $nomeImagem; ?>');"></div>
<div class="verso"></div>
</div>
</div>
<?php
}
?>
</div>
<script src="js/vira.js"></script>
</body>
</html>
memoriaOriginal.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo da Memória - Tela Cheia</title>
<style>
/* --- CONFIGURAÇÃO DA TELA (100% ALTURA) --- */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #1e1e24;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
color: #ffffff;
margin: 0 0 1vh 0;
font-size: 3.5vh;
}
/* --- GRADE SEM BORDAS E COM PEQUENOS ESPAÇOS --- */
.grade {
display: grid;
/* Proporção vertical perfeita da imagem (largura é ~70% da altura) */
grid-template-columns: repeat(5, calc(20vh * 0.7));
grid-auto-rows: 20vh;
grid-gap: 1vh; /* Espaçamento pequeno entre as células */
justify-content: center;
height: 84vh;
border: none;
}
/* --- CARTAS PROPORCIONAIS --- */
.carta {
width: 100%;
height: 100%;
perspective: 1000px;
cursor: pointer;
}
.conteudo-carta {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.carta.virada .conteudo-carta {
transform: rotateY(180deg);
}
.frente, .verso {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 1vh;
box-shadow: 0 0.5vh 1vh rgba(0,0,0,0.6);
box-sizing: border-box;
border: none; /* Garante que não existem bordas visíveis */
}
/* --- VERSO (Preenchimento Total com fundo.png) --- */
.verso {
background-image: url('img/fundo.png');
background-size: cover; /* Força a imagem a cobrir 100% do cartão sem sobras */
background-position: center;
background-repeat: no-repeat;
background-color: transparent; /* Remove qualquer fundo cinza de trás */
}
/* --- FRENTE (Lado dos pares/frutas) --- */
.frente {
background-color: #2c3e50;
color: white;
font-size: 7vh;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1>Jogo da Memória HTML</h1>
<div class="grade">
<!-- Linha 1 -->
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍎</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍌</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍇</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍓</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍊</div><div class="verso"></div></div></div>
<!-- Linha 2 -->
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍉</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍍</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍒</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍋</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🥝</div><div class="verso"></div></div></div>
<!-- Linha 3 -->
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍎</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍌</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍇</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍓</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍊</div><div class="verso"></div></div></div>
<!-- Linha 4 -->
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍉</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍍</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍒</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🍋</div><div class="verso"></div></div></div>
<div class="carta" onclick="virarCarta(this)"><div class="conteudo-carta"><div class="frente">🥝</div><div class="verso"></div></div></div>
</div>
<script>
function virarCarta(carta) {
carta.classList.toggle('virada');
}
</script>
</body>
</html>