Edita código
Copiar al portapapeles
Ejecutar »
<!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-top:-15px; margin-bottom: 10px; color: #ff6347; font-size: 2.5em; } #game-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 5px; } .card { background-color: #ffebcd; border: 2px solid #ffa07a; border-radius: 8px; padding: 5px; 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; height: 90px; } .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; } .card img { max-width: 100%; max-height: 100%; object-fit: contain; } #game-stats { margin-top: 20px; display: flex; justify-content: space-around; font-size: 1.2em; } .stat { color: #333; } </style> </head> <body> <div class="container"> <h1>Emparejar Felinos</h1> <div id="game-board"> <!-- Tarjetas se insertarán aquà --> </div> <button id="restart-button">Reiniciar Juego</button> <div id="result"></div> <div id="game-stats"> <div class="stat">Parejas correctas: <span id="correct-pairs">0</span></div> <div class="stat">Parejas incorrectas: <span id="incorrect-pairs">0</span></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const allCards = [ { id: 1, type: 'image', content: 'images/1.jpg' }, { id: 2, type: 'text', content: 'Guepardo' }, { id: 3, type: 'image', content: 'images/2.jpg' }, { id: 4, type: 'text', content: 'Tigre' }, { id: 5, type: 'image', content: 'images/3.jpg' }, { id: 6, type: 'text', content: 'Jaguar' }, { id: 7, type: 'image', content: 'images/4.jpg' }, { id: 8, type: 'text', content: 'Puma' }, { id: 9, type: 'image', content: 'images/5.jpg' }, { id: 10, type: 'text', content: 'Leopardo de las nieves' }, { id: 11, type: 'image', content: 'images/6.jpg' }, { id: 12, type: 'text', content: 'León' }, { id: 13, type: 'image', content: 'images/7.jpg' }, { id: 14, type: 'text', content: 'Tigrillo' }, // ... más parejas de imágenes y descripciones ]; const pairsToShow = 6; let selectedPairs = []; let firstCard = null; let secondCard = null; let matchedPairs = 0; let correctPairsCount = 0; let incorrectPairsCount = 0; const gameBoard = document.getElementById('game-board'); const result = document.getElementById('result'); const restartButton = document.getElementById('restart-button'); const correctPairsSpan = document.getElementById('correct-pairs'); const incorrectPairsSpan = document.getElementById('incorrect-pairs'); 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 = []; let imagesAdded = 0; let i = 0; while (imagesAdded < pairsToShow && i < allCards.length) { const card = allCards[i]; if (card.type === 'image') { selectedPairs.push(card); selectedPairs.push(allCards.find(c => c.id === card.id + 1)); imagesAdded++; } i++; } 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; if (card.type === 'image') { const imgElement = document.createElement('img'); imgElement.src = card.content; cardElement.appendChild(imgElement); } else { cardElement.innerText = card.content; } cardElement.addEventListener('click', onCardClick); gameBoard.appendChild(cardElement); }); } function onCardClick(event) { const selectedCard = event.target.closest('.card'); 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++; correctPairsCount++; correctPairsSpan.textContent = correctPairsCount; if (matchedPairs === pairsToShow) { result.innerText = '¡Has emparejado todas las tarjetas!'; } } else { firstCard.classList.remove('selected'); secondCard.classList.remove('selected'); incorrectPairsCount++; incorrectPairsSpan.textContent = incorrectPairsCount; } firstCard = null; secondCard = null; } restartButton.addEventListener('click', () => { matchedPairs = 0; correctPairsCount = 0; incorrectPairsCount = 0; result.innerText = ''; correctPairsSpan.textContent = correctPairsCount; incorrectPairsSpan.textContent = incorrectPairsCount; createBoard(); }); createBoard(); }); </script> </body> </html>
Resultado
Instrucciones