Elementor #225

				
					// Crea una matriz de instrumentos barrocos
const instrumentosBarrocos = [
  { id: 1, nombre: 'Clavicémbalo', imagen: 'clavicembalo.jpg' },
  { id: 2, nombre: 'Órgano', imagen: 'organo.jpg' },
  { id: 3, nombre: 'Violín', imagen: 'violin.jpg' },
  { id: 4, nombre: 'Flauta travesera', imagen: 'flauta.jpg' },
  { id: 5, nombre: 'Oboe', imagen: 'oboe.jpg' },
  { id: 6, nombre: 'Violonchelo', imagen: 'violonchelo.jpg' },
];

// Duplica los instrumentos para formar los pares
const cartas = instrumentosBarrocos.concat(instrumentosBarrocos);

// Baraja las cartas de forma aleatoria
cartas.sort(() => Math.random() - 0.5);

// Función para manejar el clic en una carta
function clickCarta() {
  // Verifica si ya hay dos cartas seleccionadas
  if (cartasSeleccionadas.length === 2) {
    return;
  }

  // Voltea la carta y muestra la imagen
  const carta = this;
  const cartaId = carta.getAttribute('data-id');
  carta.style.backgroundImage = `url(${cartas[cartaId].imagen})`;

  // Almacena la carta seleccionada
  cartasSeleccionadas.push(carta);

  // Verifica si las cartas seleccionadas coinciden
  if (cartasSeleccionadas.length === 2) {
    const carta1 = cartas[cartasSeleccionadas[0].getAttribute('data-id')];
    const carta2 = cartas[cartasSeleccionadas[1].getAttribute('data-id')];

    if (carta1.id === carta2.id) {
      // Las cartas coinciden, déjalas visibles
      cartasSeleccionadas.forEach((carta) => {
        carta.classList.add('encontrada');
      });

      // Reinicia la lista de cartas seleccionadas
      cartasSeleccionadas = [];

      // Verifica si todas las cartas se han encontrado
      if (document.querySelectorAll('.encontrada').length === cartas.length) {
        // Todas las cartas se encontraron, muestra un mensaje de finalización
        alert('¡Felicidades! Has encontrado todos los pares de instrumentos.');
      }
    } else {
      // Las cartas no coinciden, ocúltalas después de un breve momento
      setTimeout(() => {
        cartasSeleccionadas.forEach((carta) => {
          carta.style.backgroundImage = '';
        });

        // Reinicia la lista de cartas seleccionadas
        cartasSeleccionadas = [];
      }, 1000);
    }
  }
}

// Agrega las cartas a la interfaz
const tablero = document.getElementById('tablero');

cartas.forEach((instrumento, index) => {
  const carta = document.createElement('div');
  carta.className = 'carta';
  carta.setAttribute('data-id', index);
  carta.addEventListener('click', clickCarta);
  tablero.appendChild(carta);
});