En este artículo, analizaremos cómo crear un juego de memoria simple usando HTML, CSS y JavaScript. Explicaremos cada fragmento de código paso a paso para que incluso aquellos que ven la programación por primera vez puedan entender y repetir el resultado. Veremos cómo crear una estructura de página, darle estilo y añadir lógica de juego para que tus tarjetas cobren vida. ¡Empecemos! 🚀
1. ¿Qué es un juego de memoria? 🧠
El juego de memoria (o "Memory Game") es un juego clásico en el que el jugador debe encontrar pares de cartas idénticas, abriéndolas por turnos. La tarea principal es recordar la ubicación de cada carta para encontrar con éxito las parejas. Es un gran ejercicio para entrenar la memoria y la concentración.
2. Estructura del proyecto 📁
Nuestro proyecto consta de tres archivos principales:
index.html: la estructura del juego, lo que ve el usuario.
style.css: estilos que hacen que el juego sea bonito y agradable a la vista.
script.js: lógica del juego que determina el comportamiento de las cartas al interactuar con el usuario.
También tenemos una carpeta images, que contiene imágenes de las cartas que se utilizarán en el juego.
3. HTML: crear la base de la página 📝
Empecemos con el archivo HTML. Contiene la estructura básica de nuestro juego, que es un tablero de juego y archivos de estilo y script conectados:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Игра на память</title>
</head>
<body>
<div class="game-board">
<!-- Карты будут генерироваться здесь -->
</div>
<script src="script.js"></script>
</body>
</html>Explicación del código
<div class="game-board">: Este es el contenedor en el que se ubicarán todas las cartas. Más adelante las añadiremos dinámicamente usando JavaScript. Este es el lugar principal para la interacción del usuario con el juego.<link rel="stylesheet" href="style.css">: Conectamos el archivo CSS para estilizar nuestro juego y hacerlo visualmente atractivo.<script src="script.js">: Conectamos JavaScript para añadir lógica de juego y hacer que el juego sea interactivo.
4. CSS: añadiendo belleza 🎨
Ahora pasemos a CSS. Vamos a estilizar nuestro juego para que se vea atractivo y cómodo para el jugador.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
}
.card {
width: 100px;
height: 150px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.card img {
max-width: 100%;
max-height: 100%;
display: none;
}
.card.flipped img {
display: block;
}Explicación del código
body: Centramos todo el contenido en la pantalla para que el juego se vea bonito y esté centrado. Esto creará una experiencia de usuario agradable..game-board: Usamos grid layout para organizar las cartas en forma de cuadrícula. Esto ayuda a que la disposición de las cartas sea ordenada y uniforme..card: Estilos para mapas. Tendrán un bonito fondo blanco, sombra y esquinas redondeadas, lo que los hará visualmente atractivos. Cuando el usuario pasa el ratón, el mapa debe parecer interactivo..card img: Por defecto, las imágenes de las cartas están ocultas, ya que el jugador primero solo ve el reverso de la carta..flipped: Cuando se da la vuelta a la carta, mostramos la imagen para que el jugador pueda ver lo que se esconde debajo.
5. JavaScript: añadir la lógica del juego 🧩
Ahora viene lo más interesante: vamos a añadir la lógica del juego con JavaScript. JavaScript es responsable de la interacción del jugador con las cartas, la comprobación de coincidencias y el control del progreso del juego. Analicemos cada función:
const cardsArray = [
{ name: 'card1', img: 'images/card1.png' },
{ name: 'card2', img: 'images/card2.png' },
// Añade el resto de los pares de cartas
];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
function createBoard() {
const gameBoard = document.querySelector('.game-board');
const shuffledCards = [...cardsArray, ...cardsArray].sort(() => 0.5 - Math.random());
shuffledCards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.name = card.name;
const cardImage = document.createElement('img');
cardImage.src = card.img;
cardElement.appendChild(cardImage);
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flipped');
if (!firstCard) {
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
if (firstCard.dataset.name === secondCard.dataset.name) {
disableCards();
} else {
unflipCards();
}
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetBoard();
}, 1000);
}
function resetBoard() {
[firstCard, secondCard, lockBoard] = [null, null, false];
}
document.addEventListener('DOMContentLoaded', createBoard);Explicación del código
Matriz
cardsArray: Contiene objetos con información sobre las tarjetas, incluidos su nombre e imagen. Duplicamos cada tarjeta para crear pares.Variables
firstCard,secondCard,lockBoard: Estas variables ayudan a realizar un seguimiento del estado del juego.firstCardysecondCardalmacenan información sobre las cartas boca arriba actuales, ylockBoardevita que se den la vuelta otras cartas mientras se comprueban las coincidencias.Función
createBoard(): Crea un tablero de juego. Barajamos las cartas para que cada juego sea único e interesante, y luego añadimos las cartas al tablero.Función
flipCard(): Controla el giro de la tarjeta. Si esta es la primera carta dada la vuelta, se guarda enfirstCard. Si esta es la segunda carta, comprueba si coinciden.Función
checkForMatch(): Compara dos cartas boca arriba. Si coinciden, se llama adisableCards()para desactivar la posibilidad de voltear estas cartas.Funciones
disableCards()yunflipCards(): Si las cartas coinciden, las dejamos abiertas y desactivamos el evento de clic. Si no coinciden, las volvemos a girar en un segundo.Función
resetBoard(): Restablece los valores de las variables para que el juego pueda continuar sin errores.Evento
DOMContentLoaded: Garantiza que nuestra funcióncreateBoard()se llamará cuando se cargue todo el HTML.
6. Conclusión 🎉
¡Enhorabuena! Ahora ya sabes cómo crear un juego de memoria sencillo con HTML, CSS y JavaScript. Hemos pasado de la estructura básica de HTML a la lógica compleja del juego utilizando JavaScript. Este juego es una excelente manera de practicar los conceptos básicos de programación y mejorar tus habilidades con el DOM. ¡No tengas miedo de experimentar y añadir nuevas características, como un contador de puntos o un temporizador! 😊