Ejercicio de programación con JavaScript: Eventos del DOM
1h 30m
JavaScript Eventos del DOM: Aprende a crear un juego de memoria interactivo con tarjetas, utilizando eventos del DOM y lógica de juego, optimizado para SEO.
Estructura inicial: Crea un archivo HTML con una estructura básica que contenga un div con id "game-container" donde colocaremos las tarjetas, un div para mostrar el contador de intentos, y un botón de reinicio.
Crear las tarjetas: En tu archivo JavaScript, crea una función que genere dinámicamente 10 tarjetas (5 pares) y las añada al contenedor. Cada tarjeta debe tener un valor oculto (puedes usar números del 1 al 8, duplicados) y mostrar un reverso cuando no está volteada.
Implementar la delegación de eventos: Añade un único event listener al contenedor de tarjetas que maneje los clics en cualquier tarjeta. Cuando se haga clic en una tarjeta, esta debe voltearse mostrando su valor.
Lógica del juego: Implementa la lógica para comparar dos tarjetas volteadas. Si coinciden, déjalas volteadas; si no, vuélvelas a su estado original después de un breve retraso. Actualiza el contador de intentos después de cada comparación.
Funcionalidad de reinicio: Implementa la función para el botón de reinicio que mezcle las tarjetas, las vuelva a colocar en el contenedor y reinicie el contador de intentos y el temporizador.
Temporizador: Crea una función que inicie un temporizador cuando se haga clic en la primera tarjeta y lo detenga cuando se completen todos los pares.
Evento personalizado: Crea y dispara un evento personalizado llamado "gameCompleted" cuando todas las tarjetas hayan sido emparejadas. Este evento debe incluir información sobre el número de intentos y el tiempo transcurrido.
Mensaje de victoria: Añade un event listener para el evento "gameCompleted" que muestre un mensaje de felicitación con el número de intentos y el tiempo que tardó el jugador.
Más ejercicios de programación con JavaScript
Evalúa tus conocimientos en JavaScript con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.
Array
Modificación de elementos DOM
Encapsulación
Manipulación DOM
Clases y objetos
Uso de operadores
Uso de operadores
Estructuras de control
Funciones
Excepciones
Transformación con map()
Arrays y Métodos
Transformación con map()
Funciones flecha
Async / Await
Polimorfismo
Variables
Selección de elementos DOM
API Fetch
Encapsulación
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio

Visual Studio Code

GitHub