HTML Editor

Edita cÃ³digo
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juego de Emparejar Tarjetas</title>
    <style>
	body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f8ff;
}

.container {
    background-color: #fff3e6;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 700px;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
    color: #ff6347;
    font-size: 2.5em;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.card {
    background-color: #ffebcd;
    border: 2px solid #ffa07a;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.3s;
    font-size: 1.2em;
}

.card:hover {
    background-color: #ffd700;
    transform: scale(1.05);
}

.card.selected {
    background-color: #ffcccb;
}

.card.matched {
    background-color: #98fb98;
    cursor: default;
}

#result {
    margin-top: 20px;
    font-size: 1.5em;
    color: #32cd32;
}

#restart-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s;
}

#restart-button:hover {
    background-color: #e5533d;
}

	</style>
</head>
<body>
    <div class="container">
        <h1>Emparejar Tarjetas</h1>
        <div id="game-board">
            <!-- Tarjetas se insertarÃ¡n aquÃ -->
        </div>
        <button id="restart-button">Reiniciar Juego</button>
        <div id="result"></div>
    </div>
    <script>
	document.addEventListener('DOMContentLoaded', () => {
    const allCards = [
        { id: 1, type: 'question', content: 'Â¿Capital de Francia?' },
        { id: 2, type: 'answer', content: 'ParÃs' },
        { id: 3, type: 'question', content: 'Â¿Lago mÃ¡s grande de AmÃ©rica del Sur?' },
        { id: 4, type: 'answer', content: 'Lago Titicaca' },
        { id: 5, type: 'question', content: 'Â¿Autor de "Cien aÃ±os de soledad"?' },
        { id: 6, type: 'answer', content: 'Gabriel GarcÃa MÃ¡rquez' },
        { id: 7, type: 'question', content: 'Â¿Planeta mÃ¡s cercano al Sol?' },
        { id: 8, type: 'answer', content: 'Mercurio' },
        { id: 9, type: 'question', content: 'Â¿MontaÃ±a mÃ¡s alta del mundo?' },
        { id: 10, type: 'answer', content: 'Everest' },
        { id: 11, type: 'question', content: 'Â¿Pintor de la Mona Lisa?' },
        { id: 12, type: 'answer', content: 'Leonardo da Vinci' },
        { id: 13, type: 'question', content: 'Â¿Autor de "Hamlet"?' },
        { id: 14, type: 'answer', content: 'William Shakespeare' },
        { id: 15, type: 'question', content: 'Â¿PaÃs con mÃ¡s habitantes?' },
        { id: 16, type: 'answer', content: 'China' },
        { id: 17, type: 'question', content: 'Â¿Descubridor de AmÃ©rica?' },
        { id: 18, type: 'answer', content: 'CristÃ³bal ColÃ³n' },
        { id: 19, type: 'question', content: 'Â¿RÃo mÃ¡s largo del mundo?' },
        { id: 20, type: 'answer', content: 'Nilo' },
        { id: 21, type: 'question', content: 'Â¿Instrumento para medir terremotos?' },
        { id: 22, type: 'answer', content: 'SismÃ³grafo' },
        { id: 23, type: 'question', content: 'Â¿Inventor del telÃ©fono?' },
        { id: 24, type: 'answer', content: 'Alexander Graham Bell' },
        { id: 25, type: 'question', content: 'Â¿PaÃs donde se encuentra la torre Eiffel?' },
        { id: 26, type: 'answer', content: 'Francia' },
        { id: 27, type: 'question', content: 'Â¿Cual es el animal terrestre mÃ¡s rÃ¡pido?' },
        { id: 28, type: 'answer', content: 'Guepardo' },
        { id: 29, type: 'question', content: 'Â¿DÃa internacional de la mujer?' },
        { id: 30, type: 'answer', content: '8 de marzo' },
        { id: 31, type: 'question', content: 'Â¿Lengua mÃ¡s hablada del mundo?' },
        { id: 32, type: 'answer', content: 'Chino mandarÃn' },
        { id: 33, type: 'question', content: 'Â¿Primer presidente de EE.UU.?' },
        { id: 34, type: 'answer', content: 'George Washington' },
        { id: 35, type: 'question', content: 'Â¿Continente mÃ¡s grande?' },
        { id: 36, type: 'answer', content: 'Asia' },
        { id: 37, type: 'question', content: 'Â¿Primera mujer en el espacio?' },
        { id: 38, type: 'answer', content: 'Valentina Tereshkova' },
        { id: 39, type: 'question', content: 'Â¿Nobel de la Paz en 1991?' },
        { id: 40, type: 'answer', content: 'Aung San Suu Kyi' },
    ];

    const pairsToShow = 4;
    let selectedPairs = [];
    let firstCard = null;
    let secondCard = null;
    let matchedPairs = 0;
    const gameBoard = document.getElementById('game-board');
    const result = document.getElementById('result');
    const restartButton = document.getElementById('restart-button');

    function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

    function selectRandomPairs() {
        shuffle(allCards);
        selectedPairs = [];
        const uniqueQuestions = allCards.filter(card => card.type === 'question');
        const randomQuestions = uniqueQuestions.slice(0, pairsToShow);
        randomQuestions.forEach(question => {
            selectedPairs.push(question);
            selectedPairs.push(allCards.find(card => card.id === question.id + 1));
        });
        shuffle(selectedPairs);
    }

    function createBoard() {
        gameBoard.innerHTML = '';
        selectRandomPairs();
        selectedPairs.forEach(card => {
            const cardElement = document.createElement('div');
            cardElement.classList.add('card');
            cardElement.dataset.id = card.id;
            cardElement.dataset.type = card.type;
            cardElement.innerText = card.content;
            cardElement.addEventListener('click', onCardClick);
            gameBoard.appendChild(cardElement);
        });
    }

    function onCardClick(event) {
        const selectedCard = event.target;
        if (selectedCard.classList.contains('matched') || selectedCard === firstCard) {
            return;
        }

        selectedCard.classList.add('selected');
        if (!firstCard) {
            firstCard = selectedCard;
        } else {
            secondCard = selectedCard;
            setTimeout(checkForMatch, 500);
        }
    }

    function checkForMatch() {
                const firstCardId = parseInt(firstCard.dataset.id);
        const secondCardId = parseInt(secondCard.dataset.id);

        if ((firstCardId % 2 === 1 && secondCardId === firstCardId + 1) ||
            (secondCardId % 2 === 1 && firstCardId === secondCardId + 1)) {
            firstCard.classList.add('matched');
            secondCard.classList.add('matched');
            matchedPairs++;
            if (matchedPairs === pairsToShow) {
                result.innerText = 'Â¡Has emparejado todas las tarjetas!';
            }
        } else {
            firstCard.classList.remove('selected');
            secondCard.classList.remove('selected');
        }

        firstCard = null;
        secondCard = null;
    }

    restartButton.addEventListener('click', () => {
        matchedPairs = 0;
        result.innerText = '';
        createBoard();
    });

    createBoard();
});


	</script>
</body>
</html>