|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const buttons = document.querySelectorAll('game-button'); |
|
|
const startBtn = document.getElementById('startBtn'); |
|
|
const strictBtn = document.getElementById('strictBtn'); |
|
|
const scoreDisplay = document.querySelector('score-display'); |
|
|
|
|
|
let sequence = []; |
|
|
let playerSequence = []; |
|
|
let level = 0; |
|
|
let strictMode = false; |
|
|
let gameActive = false; |
|
|
|
|
|
|
|
|
const sounds = { |
|
|
red: new Audio('https://www.soundjay.com/buttons/sounds/button-09.mp3'), |
|
|
blue: new Audio('https://www.soundjay.com/buttons/sounds/button-10.mp3'), |
|
|
yellow: new Audio('https://www.soundjay.com/buttons/sounds/button-21.mp3'), |
|
|
green: new Audio('https://www.soundjay.com/buttons/sounds/button-22.mp3'), |
|
|
error: new Audio('https://www.soundjay.com/buttons/sounds/button-08.mp3') |
|
|
}; |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
sequence = []; |
|
|
playerSequence = []; |
|
|
level = 0; |
|
|
gameActive = true; |
|
|
scoreDisplay.setAttribute('score', level); |
|
|
generateSequence(); |
|
|
playSequence(); |
|
|
} |
|
|
|
|
|
|
|
|
function generateSequence() { |
|
|
const colors = ['red', 'blue', 'yellow', 'green', 'purple', 'pink', 'indigo', 'teal']; |
|
|
sequence.push(colors[Math.floor(Math.random() * 4)]); |
|
|
} |
|
|
|
|
|
|
|
|
function playSequence() { |
|
|
let i = 0; |
|
|
const interval = setInterval(() => { |
|
|
if (i >= sequence.length) { |
|
|
clearInterval(interval); |
|
|
return; |
|
|
} |
|
|
|
|
|
const color = sequence[i]; |
|
|
const button = document.querySelector(`game-button[color="${color}"]`); |
|
|
button.flash(); |
|
|
sounds[color].play(); |
|
|
i++; |
|
|
}, 800); |
|
|
} |
|
|
|
|
|
|
|
|
function handlePlayerInput(color) { |
|
|
if (!gameActive) return; |
|
|
|
|
|
playerSequence.push(color); |
|
|
sounds[color].play(); |
|
|
|
|
|
const currentIndex = playerSequence.length - 1; |
|
|
if (playerSequence[currentIndex] !== sequence[currentIndex]) { |
|
|
|
|
|
sounds.error.play(); |
|
|
scoreDisplay.setAttribute('status', 'error'); |
|
|
document.body.classList.add('game-over'); |
|
|
setTimeout(() => { |
|
|
document.body.classList.remove('game-over'); |
|
|
scoreDisplay.setAttribute('status', ''); |
|
|
|
|
|
if (strictMode) { |
|
|
initGame(); |
|
|
} else { |
|
|
playerSequence = []; |
|
|
playSequence(); |
|
|
} |
|
|
}, 1000); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (playerSequence.length === sequence.length) { |
|
|
|
|
|
level++; |
|
|
scoreDisplay.setAttribute('score', level); |
|
|
scoreDisplay.setAttribute('status', 'success'); |
|
|
setTimeout(() => { |
|
|
scoreDisplay.setAttribute('status', ''); |
|
|
playerSequence = []; |
|
|
generateSequence(); |
|
|
setTimeout(playSequence, 1000); |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
buttons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
if (!gameActive || playerSequence.length >= sequence.length) return; |
|
|
button.flash(); |
|
|
handlePlayerInput(button.getAttribute('color')); |
|
|
}); |
|
|
}); |
|
|
|
|
|
startBtn.addEventListener('click', initGame); |
|
|
|
|
|
strictBtn.addEventListener('click', () => { |
|
|
strictMode = !strictMode; |
|
|
strictBtn.classList.toggle('bg-indigo-600', strictMode); |
|
|
strictBtn.classList.toggle('bg-gray-700', !strictMode); |
|
|
}); |
|
|
}); |