Crear un juego de Memorama es una excelente manera de aprender y practicar habilidades de programación web. En este artículo, te mostraremos cómo hacerlo utilizando HTML, CSS y JavaScript. Este tutorial está diseñado para ser claro y conciso, asegurando que puedas seguir cada paso sin problemas.
Índice
- Preparación del proyecto
- Estructura básica de HTML
- Estilos con CSS
- Funcionalidad con JavaScript
Preparación del proyecto
Antes de comenzar, asegúrate de tener un entorno de desarrollo listo. Puedes usar cualquier editor de código como Visual Studio Code, Sublime Text o Atom.
Crea una carpeta para tu proyecto y dentro de ella, crea tres archivos:
index.htmlstyles.cssscript.js
Estructura básica de HTML
En el archivo index.html, crea la estructura básica del HTML y el contenedor del juego.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memorama</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Juego de Memorama</h1>
<div class="game-board" id="game-board">
<!-- Las cartas se generarán aquí -->
</div>
<script src="script.js"></script>
</body>
</html>
Estilos con CSS
En el archivo styles.css, agrega estilos para el tablero de juego y las cartas.
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
}
.card {
width: 100px;
height: 100px;
background-color: #1e90ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
cursor: pointer;
user-select: none;
border-radius: 8px;
}
.card.flipped {
background-color: #ffffff;
color: #1e90ff;
}
Funcionalidad con JavaScript
En el archivo script.js, agrega la lógica para el juego de Memorama.
document.addEventListener('DOMContentLoaded', () => {
const gameBoard = document.getElementById('game-board');
const cards = [
'A', 'A', 'B', 'B', 'C', 'C', 'D', 'D',
'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'
];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
// Barajar las cartas
cards.sort(() => 0.5 - Math.random());
// Crear las cartas en el tablero
cards.forEach((card) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.value = card;
cardElement.innerHTML = '?';
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.innerHTML = this.dataset.value;
this.classList.add('flipped');
if (!firstCard) {
firstCard = this;
return;
}
secondCard = this;
lockBoard = true;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.value === secondCard.dataset.value;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
setTimeout(() => {
firstCard.innerHTML = '?';
secondCard.innerHTML = '?';
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetBoard();
}, 1000);
}
function resetBoard() {
[firstCard, secondCard, lockBoard] = [null, null, false];
}
});
¡Felicidades! Has creado un juego de Memorama completamente funcional utilizando HTML, CSS y JavaScript. Este proyecto no solo es divertido, sino que también refuerza conceptos importantes de programación web como la manipulación del DOM, los eventos y el diseño con CSS Grid.
Recuerda que puedes personalizar el juego agregando más estilos, cartas y funcionalidades.
Puedes consultar todos mis trabajos dando click a este texto