85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
const symbols = ['🍎','🍌','🍒','🍇','🍉','🍑','🍊','🍓'];
|
|
let cards = [];
|
|
let firstCard = null;
|
|
let secondCard = null;
|
|
let lockBoard = false;
|
|
let matches = 0;
|
|
const gameBoard = document.getElementById('game-board');
|
|
const infoDiv = document.getElementById('info');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
|
|
function shuffle(array) {
|
|
// Fisher-Yates shuffle
|
|
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 setupBoard() {
|
|
matches = 0;
|
|
firstCard = null;
|
|
secondCard = null;
|
|
lockBoard = false;
|
|
infoDiv.textContent = '';
|
|
// Duplica los símbolos y los mezcla
|
|
cards = [...symbols, ...symbols];
|
|
shuffle(cards);
|
|
gameBoard.innerHTML = '';
|
|
cards.forEach((symbol, idx) => {
|
|
const cardEl = document.createElement('div');
|
|
cardEl.className = 'card';
|
|
cardEl.dataset.index = idx;
|
|
cardEl.dataset.symbol = symbol;
|
|
cardEl.textContent = '';
|
|
cardEl.onclick = () => flipCard(cardEl);
|
|
gameBoard.appendChild(cardEl);
|
|
});
|
|
}
|
|
|
|
function flipCard(cardEl) {
|
|
if (lockBoard) return;
|
|
if (cardEl.classList.contains('flipped') || cardEl.classList.contains('matched')) return;
|
|
|
|
cardEl.classList.add('flipped');
|
|
cardEl.textContent = cardEl.dataset.symbol;
|
|
|
|
if (!firstCard) {
|
|
firstCard = cardEl;
|
|
} else if(!secondCard && cardEl !== firstCard) {
|
|
secondCard = cardEl;
|
|
lockBoard = true;
|
|
|
|
if (firstCard.dataset.symbol === secondCard.dataset.symbol) {
|
|
// ¡Es pareja!
|
|
firstCard.classList.add('matched');
|
|
secondCard.classList.add('matched');
|
|
matches++;
|
|
resetFlipped(700);
|
|
if (matches === symbols.length) {
|
|
infoDiv.textContent = '¡Felicidades! Has encontrado todas las parejas 🎉';
|
|
}
|
|
} else {
|
|
// No es pareja, voltea las cartas después de un momento
|
|
setTimeout(() => {
|
|
firstCard.classList.remove('flipped');
|
|
secondCard.classList.remove('flipped');
|
|
firstCard.textContent = '';
|
|
secondCard.textContent = '';
|
|
resetFlipped(0);
|
|
}, 900);
|
|
}
|
|
}
|
|
}
|
|
|
|
function resetFlipped(delay) {
|
|
setTimeout(() => {
|
|
firstCard = null;
|
|
secondCard = null;
|
|
lockBoard = false;
|
|
}, delay);
|
|
}
|
|
|
|
resetBtn.onclick = setupBoard;
|
|
|
|
setupBoard(); |