Jogo da Memória — visual, divertido e ótimo para aula, porque usa grid no CSS, eventos e arrays no JavaScript.
1. Arquivo index.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</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="jogo"> <h1>Jogo da Memória</h1> <div class="painel"> <p>Jogadas: <span id="jogadas">0</span></p> <p>Pares: <span id="pares">0</span> / 8</p> <p>Tempo: <span id="tempo">0</span>s</p> </div> <div class="tabuleiro" id="tabuleiro"></div> <button id="reiniciar">Reiniciar Jogo</button> <div class="mensagem" id="mensagem"></div> </div> <script src="script.js"></script> </body> </html>
2. Arquivo estilo.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(135deg, #1e3c72, #2a5298);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.jogo {
background-color: #ffffff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
text-align: center;
}
h1 {
color: #1e3c72;
margin-bottom: 15px;
}
.painel {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 15px;
font-size: 16px;
font-weight: bold;
color: #333;
}
.tabuleiro {
display: grid;
grid-template-columns: repeat(4, 90px);
gap: 10px;
justify-content: center;
}
.carta {
width: 90px;
height: 90px;
background-color: #1e3c72;
border-radius: 10px;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
color: transparent;
transition: transform 0.3s, background-color 0.3s;
}
.carta:hover {
transform: scale(1.05);
}
.carta.virada {
background-color: #ffd166;
color: #000;
}
.carta.certa {
background-color: #06d6a0;
color: #000;
cursor: default;
}
button {
margin-top: 20px;
padding: 12px 25px;
border: none;
border-radius: 8px;
background-color: #ef476f;
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background-color: #ff6b8f;
}
.mensagem {
margin-top: 15px;
font-size: 18px;
font-weight: bold;
color: #06d6a0;
}
@media (max-width: 480px) {
.tabuleiro {
grid-template-columns: repeat(4, 70px);
}
.carta {
width: 70px;
height: 70px;
font-size: 30px;
}
}
3. Arquivo script.js
const emojis = ["🍎", "🚀", "⚽", "🐶", "🌻", "🎧", "🍕", "⭐"];
const tabuleiro = document.getElementById("tabuleiro");
const textoJogadas = document.getElementById("jogadas");
const textoPares = document.getElementById("pares");
const textoTempo = document.getElementById("tempo");
const mensagem = document.getElementById("mensagem");
const botaoReiniciar = document.getElementById("reiniciar");
let cartas = [];
let primeiraCarta = null;
let segundaCarta = null;
let travado = false;
let jogadas = 0;
let pares = 0;
let tempo = 0;
let cronometro = null;
// Embaralha o array
function embaralhar(lista) {
return lista.sort(() => Math.random() - 0.5);
}
// Cria o tabuleiro
function iniciarJogo() {
tabuleiro.innerHTML = "";
mensagem.textContent = "";
jogadas = 0;
pares = 0;
tempo = 0;
textoJogadas.textContent = jogadas;
textoPares.textContent = pares;
textoTempo.textContent = tempo;
primeiraCarta = null;
segundaCarta = null;
travado = false;
clearInterval(cronometro);
cronometro = setInterval(function () {
tempo++;
textoTempo.textContent = tempo;
}, 1000);
cartas = embaralhar([...emojis, ...emojis]);
cartas.forEach(function (simbolo) {
const carta = document.createElement("div");
carta.classList.add("carta");
carta.dataset.simbolo = simbolo;
carta.textContent = simbolo;
carta.addEventListener("click", virarCarta);
tabuleiro.appendChild(carta);
});
}
// Vira a carta clicada
function virarCarta() {
if (travado) return;
if (this === primeiraCarta) return;
if (this.classList.contains("certa")) return;
this.classList.add("virada");
if (primeiraCarta === null) {
primeiraCarta = this;
return;
}
segundaCarta = this;
jogadas++;
textoJogadas.textContent = jogadas;
verificarPar();
}
// Compara as duas cartas
function verificarPar() {
const iguais =
primeiraCarta.dataset.simbolo === segundaCarta.dataset.simbolo;
if (iguais) {
primeiraCarta.classList.add("certa");
segundaCarta.classList.add("certa");
pares++;
textoPares.textContent = pares;
limparRodada();
verificarVitoria();
} else {
travado = true;
setTimeout(function () {
primeiraCarta.classList.remove("virada");
segundaCarta.classList.remove("virada");
limparRodada();
travado = false;
}, 800);
}
}
function limparRodada() {
primeiraCarta = null;
segundaCarta = null;
}
// Verifica o fim do jogo
function verificarVitoria() {
if (pares === emojis.length) {
clearInterval(cronometro);
mensagem.textContent =
"Parabéns! Você venceu em " + jogadas + " jogadas e " + tempo + " segundos!";
}
}
botaoReiniciar.addEventListener("click", iniciarJogo);
iniciarJogo();
