131 lines
3.2 KiB
JavaScript
131 lines
3.2 KiB
JavaScript
const symbols = [
|
|
'🐶','🌸','⚽','🍕','🎲','🌞','🚗','🍩',
|
|
'⭐','🚀','🎮','💎'
|
|
];
|
|
let cards = [];
|
|
let firstCard = null;
|
|
let secondCard = null;
|
|
let lockBoard = false;
|
|
let matches = 0;
|
|
let moves = 0;
|
|
const maxMoves = 45;
|
|
let timer = 120; // segundos
|
|
let timerInterval = null;
|
|
const boardDiv = document.getElementById("game-board");
|
|
const statusDiv = document.getElementById("status");
|
|
const restartBtn = document.getElementById("restart-btn");
|
|
const movesSpan = document.getElementById("moves");
|
|
const timerSpan = document.getElementById("timer");
|
|
|
|
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 startGame() {
|
|
matches = 0;
|
|
moves = 0;
|
|
timer = 120;
|
|
firstCard = null;
|
|
secondCard = null;
|
|
lockBoard = false;
|
|
statusDiv.textContent = '';
|
|
updateHUD();
|
|
clearInterval(timerInterval);
|
|
timerInterval = setInterval(updateTimer, 1000);
|
|
cards = [...symbols, ...symbols];
|
|
shuffle(cards);
|
|
boardDiv.innerHTML = '';
|
|
cards.forEach((symbol, idx) => {
|
|
const card = document.createElement("div");
|
|
card.className = "card";
|
|
card.dataset.index = idx;
|
|
card.dataset.symbol = symbol;
|
|
card.textContent = '';
|
|
card.onclick = () => flipCard(card);
|
|
boardDiv.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function flipCard(card) {
|
|
if (lockBoard) return;
|
|
if (card.classList.contains('flipped') || card.classList.contains('matched')) return;
|
|
|
|
card.classList.add('flipped');
|
|
card.textContent = card.dataset.symbol;
|
|
|
|
if (!firstCard) {
|
|
firstCard = card;
|
|
return; // ¡Esperamos por la segunda carta!
|
|
}
|
|
|
|
if (card === firstCard) return;
|
|
secondCard = card;
|
|
lockBoard = true;
|
|
moves++;
|
|
updateHUD();
|
|
|
|
if (firstCard.dataset.symbol === secondCard.dataset.symbol) {
|
|
// Es PAR
|
|
firstCard.classList.add('matched');
|
|
secondCard.classList.add('matched');
|
|
matches++;
|
|
|
|
setTimeout(() => {
|
|
firstCard.classList.add('hide');
|
|
secondCard.classList.add('hide');
|
|
resetTurn();
|
|
// Verifica victoria DESPUÉS de ocultar
|
|
if (matches === symbols.length) {
|
|
clearInterval(timerInterval);
|
|
statusDiv.textContent = `¡Felicidades! Lo lograste en ${moves} movimientos y te sobraron ${timer} segs 🎉`;
|
|
lockBoard = true; // Deshabilita el tablero tras terminar
|
|
}
|
|
}, 800);
|
|
|
|
} else {
|
|
// No es PAR
|
|
setTimeout(() => {
|
|
firstCard.classList.remove('flipped');
|
|
secondCard.classList.remove('flipped');
|
|
firstCard.textContent = '';
|
|
secondCard.textContent = '';
|
|
resetTurn();
|
|
}, 900);
|
|
}
|
|
|
|
// DERROTA: por movimientos
|
|
if (moves >= maxMoves) {
|
|
endGame(false, "Has alcanzado el límite de movimientos. ¡Inténtalo otra vez!");
|
|
}
|
|
}
|
|
|
|
function updateHUD() {
|
|
movesSpan.textContent = `Movimientos: ${moves} / ${maxMoves}`;
|
|
timerSpan.textContent = `Tiempo: ${timer}s`;
|
|
}
|
|
|
|
function updateTimer() {
|
|
timer--;
|
|
updateHUD();
|
|
if (timer <= 0) {
|
|
endGame(false, "¡Se acabó el tiempo!");
|
|
}
|
|
}
|
|
|
|
function resetTurn() {
|
|
firstCard = null;
|
|
secondCard = null;
|
|
lockBoard = false;
|
|
}
|
|
|
|
function endGame(win, msg) {
|
|
lockBoard = true;
|
|
clearInterval(timerInterval);
|
|
statusDiv.textContent = msg;
|
|
}
|
|
|
|
restartBtn.onclick = startGame;
|
|
startGame(); |