.grid { display: grid; height: 300px; } .player { display: flex; justify-content: center; align-items: center; } .button { background-color: white; color: #840350; border: 2px solid #840350; border-radius: 4px; font-size: 18px; padding: 15px 32px; } .button:hover { transition-duration: 0.4s; background-color: #840350; color: white; }
const woodfireSound = document.getElementById('woodfire_sound'); const champagneSound = document.getElementById('champagne_sound'); const giftSound = document.getElementById('gift_sound'); const fireworksSound = document.getElementById('fireworks_sound'); const startButton = document.getElementById('start-button'); startButton.addEventListener('click', startGame); const listen = document.getElementById('listen'); const play = document.getElementById('play'); let humanSequence = []; let generatedSequence = []; let clickable = true; let gameStarted = false; let level = 1; const time = 2000; const woodfire = document.getElementById('woodfire'); const champagne = document.getElementById('champagne'); const gift = document.getElementById('gift'); const fireworks = document.getElementById('fireworks'); woodfire.addEventListener('click', event => { event.preventDefault(); handleClick("W"); }); champagne.addEventListener('click', event => { event.preventDefault(); handleClick("C"); }); gift.addEventListener('click', event => { event.preventDefault(); handleClick("G"); }); fireworks.addEventListener('click', event => { event.preventDefault(); handleClick("F"); }); const ok1 = document.getElementById('ok_1'); const ok2 = document.getElementById('ok_2'); const ok3 = document.getElementById('ok_3'); const ko = document.getElementById('ko'); function startGame() { ok1.style.display = "none"; ok2.style.display = "none"; ok3.style.display = "none"; ko.style.display = "none"; startButton.style.display = "none"; listen.style.display = "block"; clickable = false; gameStarted = true; let length = 4; if (level == 2) { length = 6; } else if (level == 3) { length = 8; } generatedSequence = []; var characters = ["W", "C", "G", "F"]; for (var i = 0; i { setTimeout(() => { activateTile(sound); }, index * time * 2); }); setTimeout(() => { humanTurn(); }, (generatedSequence.length - 1) * time * 2 + 1000); } function humanTurn() { console.log("Human turn"); clickable = true; humanSequence = []; listen.style.display = "none"; play.style.display = "block"; } function handleClick(tile) { if (clickable) { activateTile(tile) if (gameStarted) { const index = humanSequence.push(tile) - 1; if (humanSequence[index] !== generatedSequence[index]) { play.style.display = "none"; ko.style.display = "block"; startButton.style.display = "block"; } else if (humanSequence.length === generatedSequence.length) { play.style.display = "none"; startButton.style.display = "block"; if (level == 1) { ok1.style.display = "block"; } else if (level == 2) { ok1.style.display = "block"; } else { ok3.style.display = "block"; level = 0; } level = level + 1; } } } else { console.log("Can't click at this time"); } } function activateTile(tile) { if (tile == "C") { console.log("Playing sound champagne"); champagneSound.play(); } else if (tile == "W") { console.log("Playing sound woodfire"); woodfireSound.play(); } else if (tile == "F") { console.log("Playing sound fireworks"); fireworksSound.play(); } else { console.log("Playing sound gift"); giftSound.play(); } }