Juegos Mentales: entrena y fortalece tu cerebro con tecnologías web
El cerebro, al igual que las computadoras, es un sistema complejo para el procesamiento de la información. Contar con un ordenador y un cerebro potente resulta una herramienta eficaz para el desarrollo de tus actividades.
Una sección muy importante es la memoria: de ésta depende nuestra capacidad de almacenamiento, es decir, vivencias evocadas y conocimiento adquirido.
Contar con una buena o mala memoria depende del mantenimiento, entrenamiento y fortalecimiento de nuestros sistemas. Entre sus beneficios destacan: aumento de capacidad, aumento de atención, aumento de creatividad, habilidad para eliminar pensamientos obsoletos, aumento de aprendizaje, aumento del bienestar, aumento de la salud y, este punto específico, según los expertos en neurociencia, depende del nivel de aprendizaje procedimental que experimentamos, como por ejemplo aprender a andar en bicicleta. Recuerda que nuestra memoria es una herramienta valiosa que podemos fortalecer y desarrollar.
A través de la tecnología y la programación, podemos crear juegos interactivos que estimulan nuestras habilidades cognitivas y nos diviertan al mismo tiempo. En este artículo, te guiaré paso a paso para que puedas construir tu propia aplicación web de memoria utilizando HTML, CSS y JavaScript. Aprenderás cómo diseñar las cartas del juego y cómo implementar la lógica del juego. ¡Hora de activar las neuronas!
Primer paso
Lo inicial sería abrir nuestro editor de código, así como el archivo donde se encontrará almacenado nuestro programa. Acto seguido, crearás un archivo HTML al que llamaremos index.html.
A continuación, una breve explicación de nuestro archivo HTML que seguramente ya conoces.
La etiqueta <!DOCTYPE html> define el tipo de documento como HTML5.
La etiqueta <html lang="en"> establece el idioma del documento como inglés.
El bloque <head> contiene metadatos y enlaces a archivos externos.
La etiqueta <meta charset="UTF-8"> especifica la codificación de caracteres del documento como UTF-8, ampliamente compatible y que admite caracteres internacionales.
La etiqueta <meta name="viewport" content="width=device-width, initial-scale=1.0"> configura la vista del contenido en dispositivos móviles.
El atributo width=device-width establece el ancho de la página al ancho del dispositivo, y initial-scale=1.0 establece el nivel de zoom inicial en 1.0, lo que significa que la página se mostrará sin escalar en dispositivos móviles.
El enlace <link rel="stylesheet" href="styles.css"> vincula el archivo CSS externo llamado "styles.css" al documento HTML, lo que permite aplicar estilos personalizados al contenido.
La etiqueta <title>Memoria</title> establece el título del documento como "Memoria".
El contenido del cuerpo del documento se encuentra dentro de la etiqueta <body>.
El div con el id "stats" se utiliza para mostrar el número de intentos. El div con el id "wrapper" y el div con el id "game" son contenedores para el juego de memoria.
Por último, la etiqueta <script src="script.js"></script> se utiliza para incluir el archivo de JavaScript externo llamado "script.js", que contiene la lógica del juego de memoria.
Segundo paso
Lo siguiente será crear un archivo CSS al cual llamaré styles.css. Estos estilos CSS que verás a continuación se aplicarán a los elementos del juego de memoria para darles una apariencia visual específica.
body: Establece el margen en 0, el fondo en negro y oculta el desbordamiento de la página.
Estilos del contenedor principal
#wrapper: Establece la altura en 100vh (100% del alto de la ventana), muestra los elementos en una columna y los distribuye equitativamente en el espacio verticalmente.
Estilos del área de juego
#game: Establece la altura en 100vh (100% del alto de la ventana) y un máximo de altura de 700px. Muestra los elementos en una cuadrícula y los centra tanto vertical como horizontalmente.
#stats: Establece el color del texto en blanco, la posición en absoluta, el relleno en 1rem, el texto centrado, el ancho en el 100% menos 2rem y el tamaño de fuente en 3rem.
Estilos de las cartas
.card: Establece el ancho en 100px, la altura en 140px, el margen en 1rem, la posición en relativa, la transición de transformación en 0.5s y el estilo de transformación en preserve-3d.
.card.active: Aplica una transformación de rotación en el eje Y de 180 grados cuando la clase "active" está presente.
.card div: Establece el ancho y alto en 100%, el radio de borde en 1rem, muestra los elementos en una cuadrícula y los centra tanto vertical como horizontalmente. Además, establece la posición en absoluta, oculta la cara posterior de la carta y deshabilita los eventos de puntero.
.card .face: Establece el fondo en un color amarillo (#f0db4f), aplica una transformación de rotación en el eje Y de 180 grados, establece el color del texto en negro y el tamaño de fuente en 6rem.
.card .back: Establece un borde de 3px sólido de color amarillo (#f0db4f) y establece el fondo de la imagen de fondo en el centro, con tamaño de contención y sin repetición. Para la imagen utilizada en esta sección, almacenamos la imagen que queríamos mostrar en el reverso de la carta, en la misma carpeta donde se encuentran los archivos de nuestro proyecto.
Tercer paso
Aquí ocurrirá la magia, ya que utilizaremos JavaScript. Hasta ahora, el código no tenía ninguna funcionalidad, pero llegó el momento de poner nuestra mente a trabajar para crear la lógica de las cartas. Primero, generaremos nuestro archivo al cual llamaremos script.js.
En este juego, tienes que encontrar pares de cartas que sean iguales. Ahora, vamos a ver qué hace cada parte del código que verás al final de esta explicación.
Variables
totalCards: es el número total de cartas en el juego. En este caso, hay 16 cartas.
cards: es una lista vacía donde se almacenarán las cartas del juego.
selectCards: es una lista vacía donde se almacenarán las cartas que el jugador selecciona.
valuesUsed: es una lista vacía donde se almacenarán los valores utilizados para las cartas.
currentMove: es una variable que lleva la cuenta de cuántos movimientos ha hecho el jugador en su turno actual.
currentAttempts: es una variable que lleva la cuenta de cuántos intentos ha hecho el jugador en total.
Plantilla de Carta
cardTemplate: es una cadena de texto que representa la estructura HTML de una carta. Tiene una parte trasera (back) y una parte frontal (face).
Función activate
Esta función se ejecuta cuando el jugador hace clic en una carta. Verifica si el jugador puede seleccionar la carta actual. Si ya has seleccionado 2 cartas, no se permite seleccionar más. Agrega la clase active a la carta seleccionada para mostrarla.
También verifica si ya hay una carta seleccionada, si no hay ninguna carta seleccionada, agrega la carta actual a la lista selectCards y aumenta el valor de currentMove en 1.
Si ya hay dos cartas seleccionadas, incrementa currentAttempts en 1 y muestra el número de intentos en la pantalla. Compara los valores de las dos cartas seleccionadas. Si los valores coinciden, se eliminan las cartas seleccionadas y se restablece currentMove a 0.
Si los valores no coinciden, se espera 600 milisegundos y luego se ocultan las cartas seleccionadas.
Función randomValue
Esta función se utiliza para generar valores aleatorios para las cartas. Genera un número aleatorio entre 0 y la mitad del número total de cartas. Verifica si ese valor ya ha sido utilizado en valuesUsed. Si no ha sido utilizado, se agrega a la lista valuesUsed. Si el valor ya ha sido utilizado dos veces, se llama recursivamente a la función randomValue para generar otro valor aleatorio.
Bucle for
Este bucle se utiliza para crear las cartas del juego. En cada iteración, se crea un elemento div y se le asigna la plantilla de carta. Se agrega la carta a la lista cards y se muestra en la pantalla. Se llama a la función randomValue para asignar un valor aleatorio a la carta. Se asigna un controlador de eventos de clic a la carta para llamar a la función activate cuando se hace clic en ella.
¡Y eso es todo! Ahora tienes un juego de memoria en JavaScript. ¿Y tú, en cuántos intentos completas el juego de memoria?
La creación de juegos mentales bien desarrollados, utilizando los lenguajes de programación HTML, CSS y JavaScript, son ideales para iniciarte en el mundo de los juegos y generar un universo de posibilidades para beneficiar a la humanidad.
Te reto a mejorar la lógica de programación codificando un juego mental que, definitivamente, activará las neuronas.
¡Saludos!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.