<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Juego de Memoria – Elementos Químicos</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f8ff;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
}
h1 {
color: #005792;
}
#board {
display: grid;
grid-template-columns: repeat(4, 110px);
gap: 12px;
margin-top: 20px;
}
.card {
width: 110px;
height: 110px;
background: #0077b6;
color: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
user-select: none;
transition: background 0.3s;
}
.card.matched {
background: #2a9d8f;
cursor: default;
}
.card.flipped {
background: #fff;
color: #005792;
border: 2px solid #0077b6;
}
</style>
</head>
<body>
<h1>🧪 Juego de Memoria – Elementos Químicos</h1>
<p>Encuentra la pareja símbolo ↔ nombre</p>
<div id="board"></div>
<script>
const elementos = [
{s: "H", n: "Hidrógeno"},
{s: "He", n: "Helio"},
{s: "C", n: "Carbono"},
{s: "N", n: "Nitrógeno"},
{s: "O", n: "Oxígeno"},
{s: "Na", n: "Sodio"},
{s: "Fe", n: "Hierro"},
{s: "Au", n: "Oro"}
];
let cartas = [];
elementos.forEach(e => {
cartas.push({tipo: "s", valor: e.s, pareja: e.n});
cartas.push({tipo: "n", valor: e.n, pareja: e.s});
});
cartas.sort(() => Math.random() - 0.5);
const board = document.getElementById("board");
let primero = null;
let bloqueo = false;
cartas.forEach((c, i) => {
const div = document.createElement("div");
div.className = "card";
div.dataset.indice = i;
div.dataset.tipo = c.tipo;
div.dataset.valor = c.valor;
div.dataset.pareja = c.pareja;
div.textContent = "?";
div.addEventListener("click", voltear);
board.appendChild(div);
});
function voltear(e) {
const carta = e.target;
if (bloqueo || carta.classList.contains("matched") || carta.classList.contains("flipped")) return;
carta.textContent = carta.dataset.valor;
carta.classList.add("flipped");
if (!primero) {
primero = carta;
} else {
bloqueo = true;
if (primero.dataset.pareja === carta.dataset.valor) {
primero.classList.add("matched");
carta.classList.add("matched");
primero.classList.remove("flipped");
carta.classList.remove("flipped");
primero = null;
bloqueo = false;
victoria();
} else {
setTimeout(() => {
primero.textContent = "?";
carta.textContent = "?";
primero.classList.remove("flipped");
carta.classList.remove("flipped");
primero = null;
bloqueo = false;
}, 1000);
}
}
}
function victoria() {
if (document.querySelectorAll(".matched").length === cartas.length) {
setTimeout(() => alert("🎉 ¡Has ganado!"), 300);
}
}
</script>
</body>
</html>