66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
const colors = ['green', 'red', 'yellow', 'blue'];
|
|
let sequence = [];
|
|
let playerSequence = [];
|
|
let level = 0;
|
|
let waitingInput = false;
|
|
const statusDiv = document.getElementById('status');
|
|
const startBtn = document.getElementById('start-btn');
|
|
|
|
colors.forEach(color => {
|
|
document.getElementById(color).onclick = () => handleColorClick(color);
|
|
});
|
|
|
|
startBtn.onclick = startGame;
|
|
|
|
function startGame() {
|
|
sequence = [];
|
|
playerSequence = [];
|
|
level = 0;
|
|
statusDiv.textContent = '';
|
|
nextLevel();
|
|
}
|
|
|
|
function nextLevel() {
|
|
level++;
|
|
statusDiv.textContent = `Nivel ${level}`;
|
|
playerSequence = [];
|
|
sequence.push(colors[Math.floor(Math.random() * 4)]);
|
|
showSequence(0);
|
|
}
|
|
|
|
function showSequence(idx) {
|
|
waitingInput = false;
|
|
if (idx < sequence.length) {
|
|
const color = sequence[idx];
|
|
flashColor(color);
|
|
setTimeout(() => showSequence(idx + 1), 700);
|
|
} else {
|
|
setTimeout(() => {
|
|
waitingInput = true;
|
|
statusDiv.textContent = `Tu turno (Nivel ${level})`;
|
|
}, 400);
|
|
}
|
|
}
|
|
|
|
function flashColor(color) {
|
|
const el = document.getElementById(color);
|
|
el.classList.add('active');
|
|
setTimeout(() => el.classList.remove('active'), 400);
|
|
}
|
|
|
|
function handleColorClick(color) {
|
|
if (!waitingInput) return;
|
|
playerSequence.push(color);
|
|
flashColor(color);
|
|
|
|
const idx = playerSequence.length - 1;
|
|
if (color !== sequence[idx]) {
|
|
statusDiv.textContent = `¡Fallaste! Llegaste al nivel ${level}.`;
|
|
waitingInput = false;
|
|
return;
|
|
}
|
|
if (playerSequence.length === sequence.length) {
|
|
waitingInput = false;
|
|
setTimeout(nextLevel, 900);
|
|
}
|
|
} |