Tuto de el jueguito de cartas dobles

 Por si les interesa les dejare como hacer el jueguito de cartas o de memoria, algo tranqui pero que queda lindo en el blog

les dejare el codigo que yo hice para el mio, pero pueden camviar los emojis y el color tambien, espero puedan hacerlo 🍥🍥

<style>

/* Contenedor rosa estilo */

.memory-game-box {

    background-color: rgba(255, 255, 255, 0.85);

    border: 2px solid #ffb6c1;

    border-radius: 16px;

    padding: 15px;

    text-align: center;

    box-shadow: 0 8px 16px rgba(255, 182, 193, 0.3);

    max-width: 280px;

    margin: 10px auto;

}

.memory-title {

// Aca ponemos el tipo de letra y mamaño, pueden cambiarla

    font-family: 'Rock Salt', cursive; 

    font-size: 12px;

    color: #ff1493;

    margin-bottom: 12px;

}

/* Rejilla de cartas 3x4 */

.memory-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    justify-items: center;

}

/* diseño de la carta individual dada vuelta*/

.card {

    width: 65px;

    height: 65px;

    background-color: #E1ECC8; /* Color verdecito*/

    background-image: radial-gradient(#d4a5a5 10%, transparent 11%);

    background-size: 8px 8px; /* Patrón de punteado */

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    cursor: pointer;

    user-select: none;

    transition: transform 0.2s, background-color 0.2s;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

/* Estado volteado o completado */

.card.flipped, .card.matched {

    background-color: #ffffff;

    background-image: none;

    border: 2px solid #ffb6c1;

    transform: rotateY(180deg);

}

.card.matched {

    opacity: 0.7;

    cursor: default;

}

.reset-btn {

    margin-top: 12px;

    background: #fff0f5;

    border: 1px solid #ff1493;

    color: #ff1493;

    padding: 5px 12px;

    border-radius: 15px;

    font-family: 'Architects Daughter', cursive;

    cursor: pointer;

    font-size: 12px;

}

.reset-btn:hover {

    background: #ff1493;

    color: white;

}

</style>

<div class="memory-game-box">

    <div class="memory-title">★ Un jueguito ★</div> //este es el encabezado de el jueguito, no supe que mas poner

    <div class="memory-grid" id="memoryGrid"></div>

    <button class="reset-btn" onclick="initMemoryGame()">🌸Reiniciar 🌸</button> //el boton para reiniciar el juego

</div>

<script>

// Emojis para las parejas de cartas

const items = ['🍓', '🍥', '🐰', '🐚', '🌸', '🎀'];

let cardsData = [...items, ...items]; // Duplicamos para hacer parejas

let flippedCards = [];

let matchedPairs = 0;

let lockBoard = false;

function initMemoryGame() {

    const grid = document.getElementById('memoryGrid');

    grid.innerHTML = '';

    cardsData.sort(() => Math.random() - 0.5); // Barajar

    flippedCards = [];

    matchedPairs = 0;

    lockBoard = false;

    cardsData.forEach((emoji, index) => {

        const card = document.createElement('div');

        card.classList.add('card');

        card.dataset.emoji = emoji;

        card.dataset.index = index;

        card.onclick = () => flipCard(card);

        grid.appendChild(card);

    });

}

function flipCard(card) {

    if (lockBoard || card.classList.contains('flipped') || card.classList.contains('matched')) return;

    card.classList.add('flipped');

    card.innerText = card.dataset.emoji;

    flippedCards.push(card);

    if (flippedCards.length === 2) {

        checkMatch();

    }

}

function checkMatch() {

    const [card1, card2] = flippedCards;

    if (card1.dataset.emoji === card2.dataset.emoji) {

        card1.classList.add('matched');

        card2.classList.add('matched');

        matchedPairs++;

        flippedCards = [];

        if (matchedPairs === items.length) {

            setTimeout(() => alert('Devoraste vv, loba loba'), 300); //Un mensaje para cuando se gana o se completa el juego jsjsj

        }

    } else {

        lockBoard = true;

        setTimeout(() => {

            card1.classList.remove('flipped');

            card2.classList.remove('flipped');

            card1.innerText = '';

            card2.innerText = '';

            flippedCards = [];

            lockBoard = false;

        }, 800);

    }

}

// Iniciar al cargar

initMemoryGame();

</script>