Proyecto Eventos del DOM

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.