Hoy vamos a hablar sobre cómo crear un juego de memoria en JavaScript.
Primero, es importante entender que un juego de memoria implica tener una serie de cartas boca abajo, que se deben voltear de a pares para encontrar las coincidencias. Si un jugador encuentra dos cartas que coinciden, estas deben permanecer boca arriba. Si no coinciden, se deben voltear de nuevo.
Para crear el juego de memoria, necesitamos utilizar HTML, CSS y, por supuesto, JavaScript. Primero, vamos a crear el esqueleto HTML del juego:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Juego de Memoria</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="game-board"></div> <script src="app.js"></script> </body> </html>
Aquí hemos creado un documento HTML básico que incluye un enlace a un archivo CSS para aplicar algunos estilos al juego. También hemos creado un elemento div con el id «game-board» que es donde se mostrarán las cartas del juego. Por último, hemos incluido un archivo JavaScript llamado «app.js» que es donde escribiremos nuestro código.
Ahora, vamos a crear el archivo CSS para dar estilo a nuestro juego:
#game-board {
display: flex;
flex-wrap: wrap;
width: 500px;
}
.card {
border: 1px solid #ccc;
width: 100px;
height: 100px;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
cursor: pointer;
transition: transform 0.2s;
background:black;
}
.card.flipped {
transform: rotateY(180deg);
background:transparent;
}
#score {
font-size: 24px;
}
Aquí hemos definido algunos estilos básicos para el juego. El #game-board tiene un ancho y alto específicos, un borde sólido y se centra en la pantalla. Cada carta tiene un ancho y alto específicos, un margen y un borde redondeado. Además, le hemos dado a las cartas un cursor de tipo «pointer» para indicar que se pueden seleccionar.
Ahora, vamos a escribir nuestro código JavaScript:
var cards = [
{ id: 1, content: 'A' },
{ id: 2, content: 'B' },
{ id: 3, content: 'C' },
{ id: 4, content: 'D' },
{ id: 5, content: 'E' },
{ id: 6, content: 'F' },
{ id: 7, content: 'G' },
{ id: 8, content: 'H' },
{ id: 1, content: 'A' },
{ id: 2, content: 'B' },
{ id: 3, content: 'C' },
{ id: 4, content: 'D' },
{ id: 5, content: 'E' },
{ id: 6, content: 'F' },
{ id: 7, content: 'G' },
{ id: 8, content: 'H' },
];
function shuffleCards(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
cards = shuffleCards(cards);
function createCardElement(card) {
var element = document.createElement('div');
element.className = 'card';
element.dataset.cardId = card.id;
element.innerHTML = card.content;
element.addEventListener('click', cardClickHandler);
return element;
}
function renderGameBoard() {
var gameBoard = document.querySelector('#game-board');
cards.forEach(function(card) {
var cardElement = createCardElement(card);
gameBoard.appendChild(cardElement);
});
}
function renderScore() {
var scoreBoard = document.querySelector('#score');
scoreBoard.innerHTML = 'Score: ' + score;
}
var score = 0;
var flippedCards = [];
function cardClickHandler(event) {
var card = event.target;
if (flippedCards.length < 2 && !card.classList.contains('flipped')) {
flipCard(card);
flippedCards.push(card);
if (flippedCards.length === 2) {
checkForMatch();
}
}
}
function flipCard(card) {
card.classList.add('flipped');
}
function checkForMatch() {
var card1 = flippedCards[0];
var card2 = flippedCards[1];
if (card1.dataset.cardId === card2.dataset.cardId) {
score += 2;
flippedCards = [];
renderScore();
} else {
setTimeout(function() {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
renderScore();
}, 1000);
}
}
renderGameBoard();
renderScore();
Lo primero que debemos hacer es crear una matriz que contenga todas las cartas del juego cards
En esta matriz, cada objeto representa una carta y tiene una propiedad id que identifica la carta de manera única y una propiedad content que contiene el contenido de la carta (por ejemplo, una letra o un número).
El siguiente paso es crear una función que mezcle las cartas en la matriz: shuffleCards
Esta función utiliza el algoritmo de mezcla de Fisher-Yates para intercambiar aleatoriamente los elementos en la matriz y mezclar las cartas.
Ahora, vamos a crear una función que genere el HTML para cada carta y las agregue al #game-board: createCardElement.
La función createCardElement crea un elemento div que representa una carta y le asigna una clase card, un id de datos y el contenido de la carta. También agrega un controlador de eventos click para la carta.
La función renderGameBoard obtiene una referencia al #game-board y luego recorre la matriz de cartas, crea un elemento de carta para cada una usando la función createCardElement, y las agrega al #game-board.
Por último, vamos a escribir la función que maneja el evento click de las cartas: cardClickHandler
La función cardClickHandler maneja el evento click de las cartas. Si es la primera carta que se hace clic, se guarda como firstCardClicked y se agrega la clase flipped. Si es la segunda carta, se guarda como secondCardClicked y se agrega la clase flipped. Si las dos cartas coinciden (es decir, tienen el mismo id de datos), se incrementa la puntuación del jugador y se eliminan los controladores de eventos de clic en ambas cartas. Si las dos cartas no coinciden, se vuelven a voltear después de 1 segundo usando setTimeout.
Por último, vamos a agregar un elemento HTML que muestre la puntuación del jugador: renderScore
La función renderScore obtiene una referencia al elemento #score y lo actualiza con la puntuación del jugador.
Con todas estas funciones en su lugar, el juego de memoria de JavaScript está completo. Puede ver el juego en acción y probarlo en el siguiente ejemplo de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<style>
#game-board {
display: flex;
flex-wrap: wrap;
width: 500px;
}
.card {
border: 1px solid #ccc;
width: 100px;
height: 100px;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
cursor: pointer;
transition: transform 0.2s;
background:black;
}
.card.flipped {
transform: rotateY(180deg);
background:transparent;
}
#score {
font-size: 24px;
}
</style>
</head>
<body>
<div id="game-board"></div>
<div id="score"></div>
<script>
var cards = [
{ id: 1, content: 'A' },
{ id: 2, content: 'B' },
{ id: 3, content: 'C' },
{ id: 4, content: 'D' },
{ id: 5, content: 'E' },
{ id: 6, content: 'F' },
{ id: 7, content: 'G' },
{ id: 8, content: 'H' },
{ id: 1, content: 'A' },
{ id: 2, content: 'B' },
{ id: 3, content: 'C' },
{ id: 4, content: 'D' },
{ id: 5, content: 'E' },
{ id: 6, content: 'F' },
{ id: 7, content: 'G' },
{ id: 8, content: 'H' },
];
function shuffleCards(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
cards = shuffleCards(cards);
function createCardElement(card) {
var element = document.createElement('div');
element.className = 'card';
element.dataset.cardId = card.id;
element.innerHTML = card.content;
element.addEventListener('click', cardClickHandler);
return element;
}
function renderGameBoard() {
var gameBoard = document.querySelector('#game-board');
cards.forEach(function(card) {
var cardElement = createCardElement(card);
gameBoard.appendChild(cardElement);
});
}
function renderScore() {
var scoreBoard = document.querySelector('#score');
scoreBoard.innerHTML = 'Score: ' + score;
}
var score = 0;
var flippedCards = [];
function cardClickHandler(event) {
var card = event.target;
if (flippedCards.length < 2 && !card.classList.contains('flipped')) {
flipCard(card);
flippedCards.push(card);
if (flippedCards.length === 2) {
checkForMatch();
}
}
}
function flipCard(card) {
card.classList.add('flipped');
}
function checkForMatch() {
var card1 = flippedCards[0];
var card2 = flippedCards[1];
if (card1.dataset.cardId === card2.dataset.cardId) {
score += 2;
flippedCards = [];
renderScore();
} else {
setTimeout(function() {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
renderScore();
}, 1000);
}
}
renderGameBoard();
renderScore();
</script>
</body>
</html>
Este código incluye todas las funciones que hemos descrito en detalle, incluyendo una función de barajado para asegurarse de que el orden de las cartas sea aleatorio en cada partida. También incluye una hoja de estilos CSS básica para darle al juego una apariencia agradable y legible.
En resumen, hemos creado un juego de memoria simple en JavaScript utilizando HTML, CSS y JavaScript. Aprendimos a usar manipulación del DOM para crear y modificar elementos HTML en la página, así como a agregar interactividad y dinamismo al juego utilizando eventos y funciones de JavaScript. Espero que este tutorial haya sido útil y que hayas aprendido algo nuevo sobre cómo crear juegos con JavaScript. ¡Disfruta de tu nuevo juego de memoria!
