Juego básico de memoria

Los juegos de memoria, populares entre personas de todas las edades, van mucho más allá de ser una simple forma de entretenimiento. Su propósito principal radica en estimular y fortalecer nuestras habilidades cognitivas, particularmente la memoria a corto y largo plazo, mientras promueven la concentración y la agilidad mental. Estas dinámicas, aparentemente simples, están diseñadas para desafiar el cerebro a recordar patrones, imágenes, palabras o secuencias, fomentando así la conexión neuronal y el aprendizaje.

Además, los juegos de memoria cumplen un rol fundamental en el desarrollo infantil, ayudando a los niños a mejorar su capacidad de atención, organización y resolución de problemas. En adultos y personas mayores, son herramientas clave para mantener la mente activa, retrasar el deterioro cognitivo y combatir enfermedades relacionadas con la memoria, como el Alzheimer.

Por otro lado, estos juegos no solo trabajan la memoria; también fortalecen habilidades sociales y emocionales al ser utilizados en actividades grupales, promoviendo la interacción, la cooperación y la sana competencia. Desde aplicaciones móviles hasta juegos de mesa clásicos, los juegos de memoria son una herramienta accesible y adaptable para cualquier contexto.

En este artículo exploraremos en detalle cómo funcionan estos juegos, los beneficios que aportan a diferentes grupos etarios y cómo integrarlos en nuestras rutinas diarias para mejorar nuestra calidad de vida de manera divertida y efectiva.

Explicación del código del juego básico de memoria

Este código implementa un juego de memoria para dos jugadores con las siguientes características:

1. Diseño gráfico atractivo: Usa estilos con CSS3 para una interfaz moderna.

2. Juego para varios jugadores: Alterna entre los jugadores y lleva la cuenta de sus puntajes.

3. Interactividad: Usa JavaScript para manejar los clics en las cartas, las coincidencias y el cambio de turno.

4. Reinicio: Incluye un botón para reiniciar el juego.

CSS (Diseño Visual)

Body Styling:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

Define el cuerpo de la página como un contenedor centrado tanto vertical como horizontalmente.

Usa una fuente básica y un color de fondo suave.

Estilo de las Cartas (.card):

.card {
    width: 100px;
    height: 100px;
    background-color: #1e90ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
}

Tamaño cuadrado con bordes redondeados y un color azul predeterminado.

Las cartas están centradas usando display: flex y align-items/justify-content.

Previene la selección de texto con user-select: none.

Estados de Cartas (flipped, matched):

.card.flipped {
    background-color: #f39c12;
    cursor: default;
}

.card.matched {
    background-color: #2ecc71;
    cursor: default;
}

Cambia el color de fondo dependiendo del estado:

–flipped indica que está volteada.

–matched indica que coincide con otra carta.

Tablero del Juego (.game-board):

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
    margin: 20px 0;
}

Usa un diseño de cuadrícula con 4 columnas para las cartas.

Cada carta tiene un espacio de 10px entre sí.

Marcador y Jugador Activo:

Marca al jugador activo en rojo y con texto en negrita.

.player {
    margin: 10px 0;
}

.active {
    font-weight: bold;
    color: #e74c3c;
}

JavaScript (Lógica del Juego)

Creación del Mazo (createDeck):

function createDeck() {
    const icons = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
    const deck = [...icons, ...icons];
    deck.sort(() => 0.5 - Math.random());
    return deck;
}

Crea un arreglo con pares de íconos y los mezcla aleatoriamente usando sort.

Renderización del Tablero (renderBoard):

function renderBoard(deck) {
    gameBoard.innerHTML = '';
    deck.forEach((icon, index) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.dataset.icon = icon;
        card.dataset.index = index;
        card.addEventListener('click', handleCardClick);
        gameBoard.appendChild(card);
        cards.push(card);
    });
}

Crea elementos HTML para cada carta en el mazo y les asigna un evento click.

Manejo de Clics en Cartas (handleCardClick):

function handleCardClick(event) {
    const card = event.target;
    if (card.classList.contains('flipped') || card.classList.contains('matched')) {
        return;
    }

    card.textContent = card.dataset.icon;
    card.classList.add('flipped');

    if (!firstCard) {
        firstCard = card;
    } else {
        secondCard = card;
        checkMatch();
    }
}

Voltea una carta al mostrar su ícono.

Si ya hay una carta volteada, verifica si coincide con la segunda.

Verificar Coincidencias (checkMatch):

function checkMatch() {
    if (firstCard.dataset.icon === secondCard.dataset.icon) {
        firstCard.classList.add('matched');
        secondCard.classList.add('matched');
        scores[activePlayer] += 1;
        firstCard = null;
        secondCard = null;
        renderScoreboard();
    } else {
        setTimeout(() => {
            firstCard.textContent = '';
            secondCard.textContent = '';
            firstCard.classList.remove('flipped');
            secondCard.classList.remove('flipped');
            firstCard = null;
            secondCard = null;
            switchPlayer();
        }, 1000);
    }
}

Si las cartas coinciden, se marcan como matched y se incrementa el puntaje.

Si no coinciden, se voltean nuevamente tras un retraso de 1 segundo.

Cambio de Turno (switchPlayer):

function switchPlayer() {
    activePlayer = (activePlayer + 1) % players.length;
    renderScoreboard();
}

Alterna el jugador activo entre 0 y 1.

Reiniciar el Juego (restartGame):

function restartGame() {
    scores = [0, 0];
    activePlayer = 0;
    firstCard = null;
    secondCard = null;
    const deck = createDeck();
    renderBoard(deck);
    renderScoreboard();
}

Resetea las variables y reconstruye el tablero y el marcador.

Renderizar Marcador (renderScoreboard):

function renderScoreboard() {
    scoreboard.innerHTML = '';
    players.forEach((player, index) => {
        const playerScore = document.createElement('div');
        playerScore.className = 'player';
        playerScore.textContent = `${player}: ${scores[index]}`;
        if (index === activePlayer) {
            playerScore.classList.add('active');
        }
        scoreboard.appendChild(playerScore);
    });
}

Actualiza visualmente el puntaje y resalta al jugador activo.

Con estas explicaciones, deberías tener una comprensión clara del diseño y lógica del juego.

Código del juego básico de memoria en HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <h1>Memory Game</h1>
    <div class="game-board" id="gameBoard"></div>
    <div class="scoreboard" id="scoreboard"></div>
    <button onclick="restartGame()">Restart Game</button>

    <script src="script.js"></script>
</body>
</html>

Código CSS3

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

h1 {
    color: #333;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
    margin: 20px 0;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #1e90ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
}

.card.flipped {
    background-color: #f39c12;
    color: white;
    cursor: default;
}

.card.matched {
    background-color: #2ecc71;
    color: white;
    cursor: default;
}

.scoreboard {
    margin-top: 20px;
    text-align: center;
}

.player {
    margin: 10px 0;
}

.active {
    font-weight: bold;
    color: #e74c3c;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #1e90ff;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1em;
    cursor: pointer;
}

button:hover {
    background-color: #0073e6;
}

Código javascript del juego básico de memoria

const players = ["Player 1", "Player 2"];
let scores = [0, 0];
let activePlayer = 0;
let firstCard = null;
let secondCard = null;
const gameBoard = document.getElementById("gameBoard");
const scoreboard = document.getElementById("scoreboard");
const cards = [];

function createDeck() {
    const icons = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
    const deck = [...icons, ...icons];
    deck.sort(() => 0.5 - Math.random());
    return deck;
}

function renderScoreboard() {
    scoreboard.innerHTML = '';
    players.forEach((player, index) => {
        const playerScore = document.createElement('div');
        playerScore.className = 'player';
        playerScore.textContent = `${player}: ${scores[index]}`;
        if (index === activePlayer) {
            playerScore.classList.add('active');
        }
        scoreboard.appendChild(playerScore);
    });
}

function renderBoard(deck) {
    gameBoard.innerHTML = '';
    deck.forEach((icon, index) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.dataset.icon = icon;
        card.dataset.index = index;
        card.addEventListener('click', handleCardClick);
        gameBoard.appendChild(card);
        cards.push(card);
    });
}

function handleCardClick(event) {
    const card = event.target;
    if (card.classList.contains('flipped') || card.classList.contains('matched')) {
        return;
    }

    card.textContent = card.dataset.icon;
    card.classList.add('flipped');

    if (!firstCard) {
        firstCard = card;
    } else {
        secondCard = card;
        checkMatch();
    }
}

function checkMatch() {
    if (firstCard.dataset.icon === secondCard.dataset.icon) {
        firstCard.classList.add('matched');
        secondCard.classList.add('matched');
        scores[activePlayer] += 1;
        firstCard = null;
        secondCard = null;
        renderScoreboard();
    } else {
        setTimeout(() => {
            firstCard.textContent = '';
            secondCard.textContent = '';
            firstCard.classList.remove('flipped');
            secondCard.classList.remove('flipped');
            firstCard = null;
            secondCard = null;
            switchPlayer();
        }, 1000);
    }
}

function switchPlayer() {
    activePlayer = (activePlayer + 1) % players.length;
    renderScoreboard();
}

function restartGame() {
    scores = [0, 0];
    activePlayer = 0;
    firstCard = null;
    secondCard = null;
    const deck = createDeck();
    renderBoard(deck);
    renderScoreboard();
}

document.addEventListener('DOMContentLoaded', () => {
    restartGame();
});