jogo #289
Description
<title>Guardiões de Ibiúna: Missão 60</title>
<script>
const quizData = [
{ q: "Quais são as duas Unidades de Conservação estaduais em Ibiúna?", opt: ["APA de Itupararanga e PEJU", "Parque da Cachoeira e Reserva", "APA de Ibiúna e Jurupará"], c: 0, dica: "Uma começa com 'APA' e a outra protege o Jurupará.", e: "Em Ibiúna existem a APA de Itupararanga e o Parque Estadual do Jurupará (PEJU)." },
{ q: "Qual o objetivo da APA de Itupararanga?", opt: ["Extrair minério", "Construir prédios", "Proteger a água e biodiversidade"], c: 2, dica: "Pense no que usamos para beber.", e: "O objetivo é proteger a qualidade e quantidade das águas e a biodiversidade." },
{ q: "A Usina de Itupararanga começou a operar em que ano?", opt: ["1914", "1998", "2003"], c: 0, dica: "Mais de 100 anos atrás.", e: "A usina entrou em operação em 1914." },
{ q: "Quais rios formam a Represa Itupararanga?", opt: ["Tietê e Pinheiros", "Sorocabuçu, Sorocamirim e Una", "Piracicaba e Piedade"], c: 1, dica: "São três rios locais.", e: "Os rios Sorocabuçu, Sorocamirim e Una formam a represa." },
{ q: "Qual rio abastece o município de Ibiúna?", opt: ["Rio Una", "Rio Sorocabuçu", "Rio Sorocamirim"], c: 1, dica: "Nasce no Verava.", e: "O Rio Sorocabuçu é o responsável pelo abastecimento de Ibiúna." },
{ q: "O Parque Estadual do Jurupará (PEJU) tem qual tamanho?", opt: ["100 hectares", "5 mil hectares", "Mais de 26 mil hectares"], c: 2, dica: "É uma área gigantesca.", e: "A área do PEJU é de mais de 26 mil hectares." },
{ q: "Quantas cidades o Sistema São Lourenço abastece?", opt: ["5 cidades", "12 cidades", "2 cidades"], c: 1, dica: "Abastece grande parte da região.", e: "As águas da Represa Cachoeira do França abastecem 12 cidades." },
{ q: "O que significa 'Ibiúna' em Tupi-Guarani?", opt: ["Terra Preta", "Água Doce", "Cachoeira Alta"], c: 0, dica: "Refere-se à cor da terra.", e: "Ibiúna significa 'Terra Preta' ou 'Terra Escura'." },
{ q: "Para onde vai o lixo coletado em Ibiúna?", opt: ["Fica no Cupim", "Vai para Araçariguama", "Joga no Rio Una"], c: 1, dica: "Vai para outra cidade.", e: "Os resíduos são levados para Araçariguama." },
{ q: "Onde devem ser entregues as embalagens de agrotóxicos?", opt: ["Lixo comum", "Posto de devolução no Cupim", "Perto da rodoviária"], c: 1, dica: "Fica perto do antigo aterro.", e: "Devem ser entregues no posto de devolução no Bairro do Cupim." },
{ q: "O que é Mata Ciliar?", opt: ["Mata na beira dos rios", "Plantação de eucalipto", "Jardim público"], c: 0, dica: "Cílios do rio.", e: "A Mata Ciliar protege os rios contra erosão e poluição." },
{ q: "Qual destes animais é símbolo da nossa fauna local?", opt: ["Elefante", "Onça-parda", "Canguru"], c: 1, dica: "Um felino nativo.", e: "A onça-parda é um dos predadores do topo da cadeia em nossa região." },
{ q: "O que acontece se jogarmos óleo de cozinha no ralo?", opt: ["Limpa os canos", "Polui a água", "Vira sabão"], c: 1, dica: "Contamina milhares de litros.", e: "Apenas 1 litro de óleo pode poluir até 25 mil litros de água." },
{ q: "Qual a importância das áreas de 'Banhado' na represa?", opt: ["Não servem para nada", "Filtros naturais e berçários", "Lugar para entulho"], c: 1, dica: "Limpam a água.", e: "Banhados filtram sedimentos e são locais de reprodução para peixes." },
{ q: "Qual árvore é símbolo do Brasil e existe em Ibiúna?", opt: ["Pau-Brasil", "Eucalipto", "Pinheiro-manso"], c: 0, dica: "Origem do nome do país.", e: "O Pau-Brasil é nativo da Mata Atlântica da região." },
{ q: "O que é o 'Consumo Consciente'?", opt: ["Comprar tudo", "Comprar o necessário", "Não comprar nada"], c: 1, dica: "Evitar desperdício.", e: "É escolher produtos com responsabilidade." },
{ q: "Quanto tempo uma garrafa PET leva para se decompor?", opt: ["10 anos", "100 anos", "Mais de 400 anos"], c: 2, dica: "Séculos.", e: "O plástico pode durar mais de 400 anos na natureza." },
{ q: "Qual passarinho é famoso por polinizar flores?", opt: ["Pombo", "Beija-flor", "Urubu"], c: 1, dica: "Voa parado.", e: "O beija-flor é um importante polinizador da nossa flora." },
{ q: "Que tipo de resíduo deve ir para a compostagem?", opt: ["Plástico", "Restos de alimentos", "Pilhas"], c: 1, dica: "Resíduos orgânicos.", e: "Cascas de frutas e vegetais viram adubo." },
{ q: "A represa Itupararanga abastece quantos habitantes?", opt: ["Cerca de 800 mil", "Apenas 10 mil", "5 milhões"], c: 0, dica: "Quase 1 milhão.", e: "A represa é vital para quase 1 milhão de pessoas na região." },
{ q: "Qual o principal perigo de queimar lixo?", opt: ["Faz calor", "Libera gases tóxicos", "Fica bonito"], c: 1, dica: "Poluição do ar.", e: "A queima libera toxinas prejudiciais à saúde." },
{ q: "O que é 'Espécie Invasora'?", opt: ["Planta local", "Espécie de fora que prejudica", "Animal doméstico"], c: 1, dica: "Ex: Javali.", e: "Espécies que não são nativas e causam desequilíbrio." },
{ q: "A água da represa é usada para quê, além de beber?", opt: ["Lazer", "Energia e agricultura", "Nada"], c: 1, dica: "Economia local.", e: "Usada para gerar eletricidade e irrigar plantações." },
{ q: "O que fazer com pilhas usadas?", opt: ["Lixo comum", "Enterrar", "Pontos de coleta"], c: 2, dica: "Logística reversa.", e: "Devem ser descartadas em coletores especiais." },
{ q: "Qual animal ameaçado vive no PEJU?", opt: ["Pombo", "Muriqui-do-sul", "Rato"], c: 1, dica: "Maior macaco das Américas.", e: "O Muriqui-do-sul é um primata raro da nossa região." },
{ q: "O que economiza mais água no banho?", opt: ["20 minutos", "5 minutos", "Chuveiro aberto"], c: 1, dica: "Rapidez.", e: "Banhos curtos são essenciais para economizar água." },
{ q: "Qual a função das abelhas?", opt: ["Fazer mel apenas", "Polinização", "Atacar"], c: 1, dica: "Reprodução de plantas.", e: "Abelhas são fundamentais para a produção de alimentos." },
{ q: "O que significam os '3 Rs'?", opt: ["Rir, Rezar, Rolar", "Reduzir, Reutilizar, Reciclar", "Rapidez e Rio"], c: 1, dica: "Sustentabilidade.", e: "Reduzir o consumo, reutilizar itens e reciclar o que sobra." },
{ q: "Ibiúna é conhecida como a Capital de quê?", opt: ["Ferro", "Agricultura", "Cinema"], c: 1, dica: "Cinturão Verde.", e: "Ibiúna é grande produtora de hortaliças." },
{ q: "Qual o maior reservatório de água da nossa região?", opt: ["Itupararanga", "Piscina", "Caixa d'água"], c: 0, dica: "Nossa represa.", e: "Itupararanga é o principal reservatório regional." },
{ q: "O que é o Efeito Estufa?", opt: ["Um aquecimento natural intensificado pela poluição", "Uma casa de vidro para morangos", "Um vento gelado da serra"], c: 0, dica: "Funciona como um cobertor para o planeta.", e: "É um fenômeno natural, mas o excesso de gases como CO2 o torna perigoso." },
{ q: "Como as florestas de Ibiúna ajudam o clima?", opt: ["Absorvem CO2", "Atraem turistas", "Refletem a luz"], c: 0, dica: "Fotossíntese.", e: "Árvores capturam carbono, ajudando a frear o aquecimento global." },
{ q: "O que são 'Ilhas de Calor'?", opt: ["Áreas urbanas mais quentes que rurais", "Ilhas na represa", "Fogueiras"], c: 0, dica: "Asfalto e concreto retêm calor.", e: "Cidades sem árvores ficam muito mais quentes que o interior." },
{ q: "Onde descartar celulares velhos?", opt: ["Pontos de lixo eletrônico", "Lixo comum", "Rio Una"], c: 0, dica: "Contém metais pesados.", e: "Eletrônicos devem ir para a logística reversa." },
{ q: "Quem fundou Ibiúna em 1811?", opt: ["Manoel de Oliveira Carvalho", "Pedro Vaz", "Dom Pedro I"], c: 0, dica: "Capitão que doou terras.", e: "Manoel de Oliveira Carvalho é o fundador oficial." },
{ q: "Qual a cor do cesto de PAPEL na reciclagem?", opt: ["Azul", "Vermelho", "Amarelo"], c: 0, dica: "Cor do céu.", e: "Azul é para papel, Vermelho plástico, Amarelo metal." },
{ q: "O que é um Manancial?", opt: ["Reserva de água potável", "Plantação", "Mina de ouro"], c: 0, dica: "Fonte de vida.", e: "Ibiúna é uma cidade manancial porque produz água para milhões." },
{ q: "O que significa 'Espécie Endêmica'?", opt: ["Só existe naquela região", "Veio de outro país", "Animal doméstico"], c: 0, dica: "Exclusividade.", e: "São espécies que só ocorrem em um lugar específico do mundo." },
{ q: "Como o aquecimento global afeta o agricultor?", opt: ["Muda o ciclo das chuvas", "Faz crescer mais rápido", "Não afeta"], c: 0, dica: "Instabilidade.", e: "Secas e chuvas extremas prejudicam as safras de Ibiúna." },
{ q: "O que é Assoreamento?", opt: ["Acúmulo de terra no fundo do rio", "Rio que corre rápido", "Limpeza do rio"], c: 0, dica: "Falta de mata ciliar.", e: "Sem árvores, a terra cai no rio e ele fica raso." },
{ q: "Qual gás os carros liberam que aquece o planeta?", opt: ["Dióxido de Carbono (CO2)", "Oxigênio", "Nitrogênio"], c: 0, dica: "Combustão.", e: "O CO2 é o principal gás do efeito estufa vindo de motores." },
{ q: "O que é Reciclagem?", opt: ["Transformar resíduos em novos produtos", "Queimar o lixo", "Enterrar o lixo"], c: 0, dica: "Ciclo de vida.", e: "Reciclar poupa recursos naturais e energia." },
{ q: "Para que serve a camada de Ozônio?", opt: ["Protege contra raios UV", "Esquenta a Terra", "Produz chuva"], c: 0, dica: "Protetor solar natural.", e: "Ela filtra os raios solares perigosos para a saúde." },
{ q: "Qual o maior perigo das queimadas em Ibiúna?", opt: ["Destruição da fauna e poluição", "Faz muita fumaça", "Suja a roupa"], c: 0, dica: "Perda total.", e: "Queimadas matam animais e liberam muito carbono." },
{ q: "O que é Biodiversidade?", opt: ["Variedade de vida na Terra", "Um tipo de planta", "Um museu"], c: 0, dica: "Muitas espécies.", e: "É o conjunto de todos os seres vivos e seus ecossistemas." },
{ q: "O que fazer com restos de comida?", opt: ["Compostagem", "Jogar no esgoto", "Queimar"], c: 0, dica: "Adubo natural.", e: "O lixo orgânico pode virar terra fértil." },
{ q: "Qual animal ajuda a 'reflorestar' a Mata Atlântica?", opt: ["Tucano (espalha sementes)", "Cachorro", "Gato"], c: 0, dica: "Bico grande.", e: "Aves que comem frutos espalham sementes por toda a floresta." },
{ q: "O que é Sustentabilidade?", opt: ["Viver sem esgotar recursos", "Comprar muito", "Ter muito dinheiro"], c: 0, dica: "Pensar no futuro.", e: "É usar a natureza sem impedir que as futuras gerações também usem." },
{ q: "Qual o destino do vidro reciclado?", opt: ["Pode ser reciclado infinitamente", "Vira plástico", "Lixo comum"], c: 0, dica: "100% aproveitável.", e: "O vidro não perde qualidade ao ser reciclado várias vezes." },
{ q: "O que causa a erosão do solo?", opt: ["Falta de vegetação", "Muita planta", "Vento fraco"], c: 0, dica: "Solo exposto.", e: "Sem raízes, a chuva carrega a terra embora." },
{ q: "Por que evitar canudos de plástico?", opt: ["Poluem oceanos e matam animais", "São caros", "São feios"], c: 0, dica: "Tartarugas.", e: "O plástico pequeno é um dos que mais mata vida marinha." },
{ q: "Como economizar energia em casa?", opt: ["Apagar luzes e usar LED", "Deixar TV ligada", "Banho de 1 hora"], c: 0, dica: "Consumo consciente.", e: "Economizar energia reduz a necessidade de novas usinas." },
{ q: "Qual o papel do Guardião da Natureza?", opt: ["Preservar e ensinar", "Apenas olhar", "Lutar com animais"], c: 0, dica: "Ação positiva.", e: "Todos somos responsáveis por cuidar do nosso planeta." },
{ q: "O que é Poluição Atmosférica?", opt: ["Sujeira no ar", "Lixo no chão", "Ruído alto"], c: 0, dica: "Respiração.", e: "Gases e partículas que tornam o ar impróprio." },
{ q: "Qual árvore de Ibiúna produz pinhão?", opt: ["Araucária", "Eucalipto", "Mangueira"], c: 0, dica: "Pinheiro nativo.", e: "A Araucária é típica de áreas frias e altas como Ibiúna." },
{ q: "O que é pegada de carbono?", opt: ["Rastro de CO2 que deixamos", "Tamanho do pé", "Um sapato"], c: 0, dica: "Impacto pessoal.", e: "É a medida de quanto poluímos em nossas atividades diárias." },
{ q: "Por que proteger as nascentes?", opt: ["Para garantir água no futuro", "Para pescar", "Para nadar"], c: 0, dica: "Início de tudo.", e: "Sem nascentes, os rios secam e a vida acaba." },
{ q: "O que é Logística Reversa?", opt: ["Empresa recolhe o que vendeu", "Andar para trás", "Vender lixo"], c: 0, dica: "Responsabilidade do fabricante.", e: "Fabricantes de pilhas e pneus devem recolher os produtos usados." },
{ q: "Qual benefício da horta orgânica?", opt: ["Alimento sem veneno", "Fica mais bonito", "Dá menos trabalho"], c: 0, dica: "Saúde.", e: "Orgânicos não usam agrotóxicos que fazem mal à saúde e ao solo." },
{ q: "Qual a maior lição dos Guardiões de Ibiúna?", opt: ["Cuidar hoje para ter amanhã", "Jogar videogame", "Dormir cedo"], c: 0, dica: "Legado.", e: "A preservação é um ato de amor ao próximo e ao planeta." }
];
const game = {
players: [], currentIdx: 0, rotation: 0, timeLeft: 90,
timerInterval: null, hintUsed: false, count: 0, currentPlayerIdx: 0,
init() {
if (localStorage.getItem('ibiuna_guardiao_save')) {
document.getElementById('setup-screen').classList.add('hidden');
document.getElementById('recovery-screen').classList.remove('hidden');
}
},
// Função de áudio otimizada para navegadores móveis (Safari/Chrome Mobile)
unlockAudio() {
const audio = document.getElementById('applause-sound');
if (audio) {
audio.play().then(() => {
audio.pause();
audio.currentTime = 0;
}).catch(e => console.log("Áudio aguardando interação real."));
}
},
vibrate(pattern) {
if (navigator.vibrate) navigator.vibrate(pattern);
},
triggerFlash(type) {
const cls = type === 'success' ? 'flash-success' : 'flash-error';
document.body.classList.add(cls);
setTimeout(() => document.body.classList.remove(cls), 500);
},
triggerShake() {
const wrapper = document.getElementById('game-wrapper');
wrapper.classList.add('shake-effect');
setTimeout(() => wrapper.classList.remove('shake-effect'), 500);
},
save() {
const data = { players: this.players, currentIdx: this.currentIdx, rotation: this.rotation, count: this.count };
localStorage.setItem('ibiuna_guardiao_save', JSON.stringify(data));
},
loadProgress() {
const data = JSON.parse(localStorage.getItem('ibiuna_guardiao_save'));
this.players = data.players; this.currentIdx = data.currentIdx;
this.rotation = data.rotation; this.count = data.count;
document.getElementById('recovery-screen').classList.add('hidden');
this.buildWheel(); this.updateScoreboard();
document.getElementById('wheel').style.transform = `rotate(${this.rotation}deg)`;
document.getElementById('roulette-screen').classList.remove('hidden');
},
clearSave() { localStorage.removeItem('ibiuna_guardiao_save'); location.reload(); },
showNameInputs() {
this.count = parseInt(document.getElementById('player-count').value);
const container = document.getElementById('name-fields');
container.innerHTML = `
${explanation}`; document.getElementById('feedback-panel').classList.remove('hidden'); document.getElementById('hint-btn').classList.add('hidden'); this.updateScoreboard(); this.save(); }, timeOut() { this.vibrate(500); this.triggerFlash('error'); this.triggerShake(); clearInterval(this.timerInterval); document.querySelectorAll('.option-btn').forEach(b => b.disabled = true); document.getElementById('explanation').innerHTML = "TEMPO ESGOTADO!
" + quizData[this.currentIdx % quizData.length].e; document.getElementById('feedback-panel').classList.remove('hidden'); }, useHint() { this.hintUsed = true; document.getElementById('hint-area').classList.remove('hidden'); document.getElementById('hint-btn').classList.add('hidden'); }, backToWheel() { this.currentIdx++; if(this.currentIdx < 60) { document.getElementById('quiz-screen').classList.add('hidden'); document.getElementById('roulette-screen').classList.remove('hidden'); this.save(); } else { this.showPodium(); } }, showPodium() { localStorage.removeItem('ibiuna_guardiao_save'); document.getElementById('quiz-screen').classList.add('hidden'); document.getElementById('result-screen').classList.remove('hidden'); // Reprodução do áudio final const audio = document.getElementById('applause-sound'); if(audio) audio.play().catch(() => {}); const end = Date.now() + 6000; (function frame() { confetti({ particleCount: 3, angle: 60, spread: 55, origin: { x: 0, y: 0.6 } }); confetti({ particleCount: 3, angle: 120, spread: 55, origin: { x: 1, y: 0.6 } }); if (Date.now() < end) requestAnimationFrame(frame); }()); const sorted = [...this.players].sort((a,b) => b.score - a.score); const podiumColors = ['#ffd700', '#c0c0c0', '#cd7f32']; document.getElementById('podium-ui').innerHTML = sorted.slice(0,3).map((p,i) => `
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Fredoka+One&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
:root {
--forest-green: #2d5a27; --leaf-green: #4caf50; --earth-brown: #795548;
--sun-yellow: #fbc02d; --sky-blue: #e3f2fd; --white: #ffffff;
--danger-red: #f44336;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Ajuste para garantir que o fundo ocupe 100% da tela no Safari/iOS */
html, body {
height: 100%;
height: -webkit-fill-available;
}
body {
font-family: 'Montserrat', sans-serif; background: #c8e6c9;
margin: 0; display: flex; justify-content: center; align-items: center;
min-height: 100vh;
transition: background-color 0.4s ease; overflow-x: hidden;
}
/* Efeitos Visuais */
.flash-success { background-color: #4caf50 !important; }
.flash-error { background-color: #f44336 !important; }
.shake-effect {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
border: 2px solid var(--danger-red) !important;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}
#game-wrapper {
width: 92%; max-width: 500px; background: var(--white); border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 20px; position: relative;
border: 2px solid transparent; transition: transform 0.2s;
}
.hidden { display: none !important; }
/* Timer */
#timer-container { width: 100%; height: 8px; background: #eee; border-radius: 4px; margin: 10px 0; overflow: hidden; }
#timer-bar { width: 100%; height: 100%; background: var(--leaf-green); transition: width 1s linear; }
/* Roleta com aceleração de hardware para Safari */
#wheel-container { position: relative; width: 250px; height: 250px; margin: 20px auto; }
#wheel {
width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--earth-brown);
transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);
will-change: transform;
-webkit-transform: translateZ(0);
}
#pointer {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
border-top: 25px solid var(--earth-brown); z-index: 10;
}
/* Botões e Inputs */
.btn-main { width: 100%; padding: 15px; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; margin-top: 10px; font-size: 1rem; -webkit-appearance: none; }
.btn-next { background: var(--forest-green); color: white; border-bottom: 4px solid #1a3a16; }
.btn-next:active { transform: translateY(2px); border-bottom-width: 2px; }
input, select { width: 100%; padding: 12px; border-radius: 10px; border: 2px solid #ddd; margin-bottom: 10px; font-size: 16px; }
.option-btn { background: #f1f8e9; border: 2px solid #c8e6c9; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 600; margin-bottom: 8px; width: 100%; text-align: left; }
.correct { background: #c8e6c9 !important; border-color: #4caf50 !important; }
.wrong { background: #ffcdd2 !important; border-color: #f44336 !important; }
#scoreboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 15px; }
.score-box { background: #f1f8e9; padding: 5px; border-radius: 8px; text-align: center; border: 1px solid #c8e6c9; font-size: 0.7rem; }
.podium-step { transition: height 1s ease-out; }
</style>
Missão em Pausa!
Encontramos um progresso salvo.
Retomar Jornada Novo Jogo<div id="setup-screen" style="text-align: center;">
<h1 style="font-family: 'Fredoka One'; color: var(--forest-green); margin-bottom: 5px;">Guardiões de Ibiúna</h1>
<p style="font-size: 0.9rem;">Missão 60: Sustentabilidade</p>
<p>Quantos heróis na equipe?</p>
<select id="player-count">
<option value="2">2 Jogadores</option>
<option value="3">3 Jogadores</option>
<option value="4">4 Jogadores</option>
<option value="5">5 Jogadores</option>
<option value="6">6 Jogadores</option>
</select>
<button class="btn-main btn-next" onclick="game.unlockAudio(); game.showNameInputs()">Configurar Nomes</button>
</div>
<div id="names-screen" class="hidden" style="text-align: center;">
<div id="name-fields"></div>
<button class="btn-main btn-next" onclick="game.startExpedition()">Começar Jornada</button>
</div>
<div id="roulette-screen" class="hidden" style="text-align: center;">
<h3 id="turn-title" style="color: var(--forest-green); margin: 0;">Quem será o próximo?</h3>
<div id="wheel-container"><div id="pointer"></div><div id="wheel"></div></div>
<button id="spin-btn" class="btn-main btn-next" onclick="game.spin()">Girar Roleta! 🌀</button>
<div id="scoreboard"></div>
</div>
<div id="quiz-screen" class="hidden">
<div style="background: var(--forest-green); color: white; padding: 10px; border-radius: 12px; text-align: center;">
<strong id="current-player-display"></strong> | <span id="timer-text">01:30</span>
<div id="timer-container"><div id="timer-bar"></div></div>
</div>
<div style="padding: 10px 0;">
<p id="q-text" style="font-weight: bold; color: var(--forest-green); min-height: 50px;"></p>
<div id="hint-area" class="hidden" style="background: #fffde7; padding: 10px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 10px; border-left: 4px solid gold;">
<span id="hint-text"></span>
</div>
<button id="hint-btn" class="btn-main" style="background:#eee; font-size:0.75rem" onclick="game.useHint()">💡 Usar Dica (-0.5 pts)</button>
<div id="options"></div>
<div id="feedback-panel" class="hidden" style="margin-top: 10px; padding: 15px; background: #e8f5e9; border-radius: 12px; border: 1px solid #4caf50;">
<p id="explanation" style="font-size: 0.85rem; margin-top:0;"></p>
<button class="btn-main btn-next" onclick="game.backToWheel()">Continuar Missão ➡</button>
</div>
</div>
</div>
<div id="result-screen" class="hidden" style="text-align: center;">
<h2 style="font-family: 'Fredoka One'; color: var(--forest-green);">Ranking Final</h2>
<div id="podium-ui" style="display:flex; align-items:flex-end; justify-content:center; gap:8px; height:120px; margin-bottom:20px;"></div>
<div id="final-list" style="margin: 15px 0; text-align: left; font-size: 0.9rem; max-height: 150px; overflow-y: auto; padding: 10px; background: #f9f9f9; border-radius: 10px;"></div>
<button class="btn-main btn-next" onclick="game.clearSave()">Reiniciar Desafio</button>
</div>
Nomes dos Heróis
`; for(let i=1; i<=this.count; i++) { container.innerHTML += ``; } document.getElementById('setup-screen').classList.add('hidden'); document.getElementById('names-screen').classList.remove('hidden'); }, startExpedition() { const inputs = document.querySelectorAll('.p-name'); inputs.forEach((input, i) => { this.players.push({ name: input.value.trim() || `Herói ${i+1}`, score: 0 }); }); this.buildWheel(); this.updateScoreboard(); this.save(); document.getElementById('names-screen').classList.add('hidden'); document.getElementById('roulette-screen').classList.remove('hidden'); }, buildWheel() { const wheel = document.getElementById('wheel'); let grad = "conic-gradient(", step = 360/this.count; const colors = ['#2d5a27','#4caf50','#fbc02d','#795548','#ff7043','#26a69a']; for(let i=0; i `${p.name}
⭐${p.score.toFixed(1)}
`).join('');
},
spin() {
const btn = document.getElementById('spin-btn'); btn.disabled = true;
this.rotation += Math.floor(Math.random() * 360) + 1800;
document.getElementById('wheel').style.transform = `rotate(${this.rotation}deg)`;
setTimeout(() => {
this.vibrate(50);
let actualDeg = this.rotation % 360;
let winIdx = Math.floor(((360 - (actualDeg % 360)) % 360) / (360/this.count));
this.currentPlayerIdx = winIdx;
this.openQuiz();
btn.disabled = false;
}, 4100);
},
openQuiz() {
this.hintUsed = false;
document.getElementById('roulette-screen').classList.add('hidden');
document.getElementById('quiz-screen').classList.remove('hidden');
document.getElementById('feedback-panel').classList.add('hidden');
document.getElementById('hint-area').classList.add('hidden');
document.getElementById('hint-btn').classList.remove('hidden');
const q = quizData[this.currentIdx % quizData.length];
document.getElementById('current-player-display').innerText = "Vez de: " + this.players[this.currentPlayerIdx].name;
document.getElementById('q-text').innerText = q.q;
document.getElementById('hint-text').innerText = q.dica;
const optsDiv = document.getElementById('options');
optsDiv.innerHTML = '';
q.opt.forEach((text, index) => {
const b = document.createElement('button');
b.className = 'option-btn';
b.innerText = text;
b.onclick = () => this.checkAnswer(index, q.c, q.e, b);
optsDiv.appendChild(b);
});
this.startTimer();
},
startTimer() {
this.timeLeft = 90;
const bar = document.getElementById('timer-bar');
clearInterval(this.timerInterval);
this.timerInterval = setInterval(() => {
this.timeLeft--;
document.getElementById('timer-text').innerText = `0${Math.floor(this.timeLeft/60)}:${(this.timeLeft%60).toString().padStart(2,'0')}`;
let percent = (this.timeLeft/90)*100;
bar.style.width = percent + "%";
if(this.timeLeft <= 0) this.timeOut();
}, 1000);
},
checkAnswer(idx, correct, explanation, btn) {
clearInterval(this.timerInterval);
document.querySelectorAll('.option-btn').forEach(b => b.disabled = true);
if(idx === correct) {
this.vibrate(60); this.triggerFlash('success');
btn.classList.add('correct');
this.players[this.currentPlayerIdx].score += this.hintUsed ? 0.5 : 1.0;
confetti({ particleCount: 40, spread: 60, origin: { y: 0.7 } });
} else {
this.vibrate([150, 100, 150]); this.triggerFlash('error'); this.triggerShake();
btn.classList.add('wrong');
}
document.getElementById('explanation').innerHTML = `A resposta certa era: ${quizData[this.currentIdx % quizData.length].opt[correct]}⭐${p.score.toFixed(1)}
${explanation}`; document.getElementById('feedback-panel').classList.remove('hidden'); document.getElementById('hint-btn').classList.add('hidden'); this.updateScoreboard(); this.save(); }, timeOut() { this.vibrate(500); this.triggerFlash('error'); this.triggerShake(); clearInterval(this.timerInterval); document.querySelectorAll('.option-btn').forEach(b => b.disabled = true); document.getElementById('explanation').innerHTML = "TEMPO ESGOTADO!
" + quizData[this.currentIdx % quizData.length].e; document.getElementById('feedback-panel').classList.remove('hidden'); }, useHint() { this.hintUsed = true; document.getElementById('hint-area').classList.remove('hidden'); document.getElementById('hint-btn').classList.add('hidden'); }, backToWheel() { this.currentIdx++; if(this.currentIdx < 60) { document.getElementById('quiz-screen').classList.add('hidden'); document.getElementById('roulette-screen').classList.remove('hidden'); this.save(); } else { this.showPodium(); } }, showPodium() { localStorage.removeItem('ibiuna_guardiao_save'); document.getElementById('quiz-screen').classList.add('hidden'); document.getElementById('result-screen').classList.remove('hidden'); // Reprodução do áudio final const audio = document.getElementById('applause-sound'); if(audio) audio.play().catch(() => {}); const end = Date.now() + 6000; (function frame() { confetti({ particleCount: 3, angle: 60, spread: 55, origin: { x: 0, y: 0.6 } }); confetti({ particleCount: 3, angle: 120, spread: 55, origin: { x: 1, y: 0.6 } }); if (Date.now() < end) requestAnimationFrame(frame); }()); const sorted = [...this.players].sort((a,b) => b.score - a.score); const podiumColors = ['#ffd700', '#c0c0c0', '#cd7f32']; document.getElementById('podium-ui').innerHTML = sorted.slice(0,3).map((p,i) => `
${i+1}º
`).join('');
document.getElementById('final-list').innerHTML = sorted.map((p,i) => `
${p.name}
${i+1}º ${p.name}
${p.score.toFixed(1)}
`).join('');
}
};
window.onload = () => game.init();
</script>