let tarjeta1, tarjeta2;
let bloquearTablero = false;
//const emojis = ['🏖️', '🍉', '🌴', '👙', '🌞', '🕶️', '🍦', '⛵', '🏝️', '🏊', '🍹', '🌅'];
const emojis = ['🏖️', '🍉', '🌴', '👙', '🌞', '🕶️', '🍦', '⛵', '🏊', '🍹'];

const longitud = emojis.length;

let score = 0;
const tablero = document.querySelector('#tablero');
tablero.innerHTML = '';

const tarjetas = emojis.concat(emojis)
.sort(() => 0.5 - Math.random())
.map(emoji => {
    const tarjeta = document.createElement('div');
    tarjeta.classList.add('tarjeta');
    tarjeta.dataset.emoji = emoji;

    const tarjetaCuerpo = document.createElement('div');
    tarjetaCuerpo.classList.add('tarjeta__cuerpo');

    const frente = document.createElement('div');
    frente.classList.add('frente');

    const trasera = document.createElement('div');
    trasera.classList.add('trasera');
    trasera.textContent = emoji;

    tarjetaCuerpo.append(frente, trasera);
    tarjeta.appendChild(tarjetaCuerpo);
    return tarjeta;
});


tablero.append(...tarjetas);

tablero.addEventListener('click', function (evento) {
    const tarjetaClicada = evento.target.closest('.tarjeta');
    if (bloquearTablero || tarjetaClicada === tarjeta1 || tarjetaClicada.classList.contains('flip')) {
        return;
    }

    tarjetaClicada.classList.add('flip');

    if (!tarjeta1) {
        tarjeta1 = tarjetaClicada;
    } else {
        tarjeta2 = tarjetaClicada;
        bloquearTablero = true;

        if (tarjeta1.dataset.emoji === tarjeta2.dataset.emoji) {
            resetearTarjetas();
            score++;
           // alert(score);
            if(score===longitud){mostrarMensaje("Enhorabuena lo has conseguido.<br /><a href=''>Otro juego?</a>");}
        } else {
            setTimeout(desvoltearTarjetas, 800);
        }
    }
});

function desvoltearTarjetas() {
    const rect1 = tarjeta1.getBoundingClientRect();
    const rect2 = tarjeta2.getBoundingClientRect();

    tarjeta1.style.setProperty('--x', `${rect2.left - rect1.left}px`);
    tarjeta1.style.setProperty('--y', `${rect2.top - rect1.top}px`);
    tarjeta2.style.setProperty('--x', `${rect1.left - rect2.left}px`);
    tarjeta2.style.setProperty('--y', `${rect1.top - rect2.top}px`);

    tarjeta1.classList.add('intercambiar');
    tarjeta2.classList.add('intercambiar');

    setTimeout(() => {
        const tarjeta1Siguiente = tarjeta1.nextElementSibling;
        const tarjeta2Siguiente = tarjeta2.nextElementSibling;
    
        if (tarjeta1Siguiente !== tarjeta2) {
            tablero.insertBefore(tarjeta2, tarjeta1Siguiente);
        }
        if (tarjeta2Siguiente !== tarjeta1) {
            tablero.insertBefore(tarjeta1, tarjeta2Siguiente);
        }

        

    
        tarjeta1.classList.remove('intercambiar');
        tarjeta2.classList.remove('intercambiar');
        tarjeta1.style.removeProperty('--x');
        tarjeta1.style.removeProperty('--y');
        tarjeta2.style.removeProperty('--x');
        tarjeta2.style.removeProperty('--y');
    
        setTimeout(() => {
            tarjeta1.classList.remove('flip');
            tarjeta2.classList.remove('flip');
            resetearTarjetas();



        }, 1000);
    }, 1000);
}

function resetearTarjetas() {
    [tarjeta1, tarjeta2, bloquearTablero] = [null, null, false];
}


// Código para mostrar un mensaje en el div
function mostrarMensaje(mensaje) {
  const mensajeDiv = document.getElementById("mensaje");
  mensajeDiv.innerText = mensaje;
}





� 2025 olesur.com