Sim ou Não Desafio - Jogo de Perguntas e Respostas - Casual Jogo

Por favor, utilize Three.js para gerar um **jogo com design mobile-first** com o tema "Desafio Sim ou Não". Leia primeiro os seguintes requisitos detalhados de design do jogo e, em seguida, gere o código em conformidade: ### 1. Ativos e Ambiente * **Estilo Visual:** Estilo 3D hyper-casual com uma estética de "Programa de TV". Utilize cores brilhantes e de alta saturação. * **Ambiente:** Um palco dividido em duas zonas claras: uma **Zona Verde** à esquerda, com a etiqueta "SIM", e uma **Zona Vermelha** à direita, com a etiqueta "NÃO". * **Plano de Fundo:** Um padrão dinâmico e giratório de explosão solar (amarelo e laranja), semelhante ao da captura de ecrã, implementado através de um shader ou de um plano giratório simples para minimizar o custo de desempenho. * **Personagens:** * Utilize conjuntos geométricos simples de baixo poligonamento (cápsulas/esferas) para representar os jogadores (Jogador 1: Azul, Jogador 2: Vermelho). * **Expressão:** Se possível, adicione texturas faciais simples que mudam de acordo com o estado do jogo (cara pensativa durante as perguntas, cara feliz para a resposta correta, cara tonta para a resposta incorreta). * **Acessórios:** Texto 3D flutuante para a Pergunta acima do centro do palco. Caixas de presentes (cubos com texturas de laço) que aparecem quando um jogador consegue uma sequência de respostas corretas. * **Otimização:** Utilize principalmente `BoxGeometry` e `CylinderGeometry` para manter as chamadas de desenho baixas. Utilize renderização instanciada se gerar múltiplos acessórios decorativos. ### 2. Requisitos de Áudio * **Música de Fundo (BGM):** Uma faixa "Quiz Show" sintetizada, animada e em loop. Deve aumentar ligeiramente de tempo à medida que o temporizador diminui. * **Efeitos Sonoros:** * **Tic-Tac:** Um som de relógio mecânico a tocar durante a fase de resposta. * **Correto:** Um som brilhante de "Ding" ou de aplausos. * **Incorreto:** Um som cómico de "Zumbido" ou de mola. * **Movimento:** Sons suaves de "whoosh" quando as personagens se movem rapidamente para uma zona. ### 3. Ciclo de Jogo * **Modos de Jogo:** * **1 Jogador:** Modo infinito para ver quantas perguntas podem ser respondidas corretamente seguidas. * **2 Jogadores (Local):** Modo competitivo no mesmo dispositivo. * **Mecânica Principal:** 1. Aparece uma Afirmação de Conhecimento Geral (ex: "Os peixes conseguem voar"). 2. Uma contagem decrescente de 5 segundos começa. 3. Os jogadores têm de mover fisicamente a sua personagem para a zona **SIM** ou **NÃO** antes do tempo acabar. 4. **Resolução:** Uma alçapão abre-se por baixo da zona errada, ou um peso pesado cai. O perdedor é eliminado/perde uma vida. * **Vitória:** No modo 2J, o primeiro a chegar a 5 pontos vence. * **Surpresas:** Ocasionalmente, aparece uma "Caixa Misteriosa" na zona correta. Recolhê-la dá pontos bónus ou um escudo contra uma resposta errada. ### 4. Controlos & Interação Móvel * **Orientação do Ecrã:** O **Modo Paisagem** é obrigatório para acomodar as zonas divididas e o layout para 2 jogadores. * **Câmara:** Uma câmara ortográfica fixa, de ângulo alto, para mostrar todo o palco e ambas as zonas com clareza. * **Controlos:** * **Modo 1 Jogador:** Duas grandes zonas de toque transparentes no ecrã. Toque no lado esquerdo para correr para o "SIM", Toque no lado direito para correr para o "NÃO". * **Modo 2 Jogadores:** * **Jogador 1 (Lado esquerdo do ecrã):** Um joystick virtual ou botões de seta Esquerda/Direita no canto inferior esquerdo. * **Jogador 2 (Lado direito do ecrã):** Um joystick virtual ou botões de seta Esquerda/Direita no canto inferior direito. * **Feedback de IU:** * Os botões devem reduzir ligeiramente de tamanho quando pressionados (feedback visual). * Acionar vibração do dispositivo (Feedback Háptico) quando um jogador faz uma seleção ou responde erradamente. * O texto da IU deve ser grande, legível e centrado para ecrãs pequenos. Gere um jogo de puzzle 2D usando HTML5 Canvas e JavaScript vanilla. O tema é "Labirinto Mecânico". O jogador controla uma engrenagem que precisa navegar por um labirinto giratório para alcançar a saída. **Requisitos do Jogo:** 1. O labirinto é composto por paredes (`#`), espaços vazios (`.`), a engrenagem do jogador (`P`), e a saída (`E`). 2. A engrenagem (`P`) só se pode mover para cima, baixo, esquerda e direita. 3. A cada 5 segundos, o labirinto gira 90 graus no sentido dos ponteiros do relógio. A gravidade muda, e a engrenagem desliza na nova direção "para baixo" até atingir uma parede. 4. O objetivo é chegar a `E` antes de ficar sem tempo. **Código Inicial:** ```html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <title>Labirinto Mecânico</title> <style> body { text-align: center; font-family: Arial, sans-serif; } canvas { border: 2px solid #333; background-color: #111; } .info { margin-top: 10px; font-size: 18px; color: #0AF; } </style> </head> <body> <h1>Labirinto Mecânico</h1> <canvas id="gameCanvas" width="480" height="480"></canvas> <div class="info"> Tempo: <span id="time">60</span>s | Movimentos: <span id="moves">0</span> </div> <script> // Inicialização do Canvas const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const cellSize = 32; // Estado do jogo let maze = []; let player = { x: 1, y: 1 }; let exit = { x: 14, y: 14 }; let timeLeft = 60; let moves = 0; let rotationTimer = 0; // Layout inicial do labirinto (exemplo) const mazeLayout = [ "################", "#P...........#.#", "#.######.###.#.#", "#.#......#.#...#", "#.#.####.#.###.#", "#...#..#.#.#...#", "#####.#.#.#.###.#", "#.....#...#.#...#", "#.#####.###.#.#.#", "#.#.........#.#.#", "#.#.#########.#.#", "#.#.............#", "#.###############", "#...............#", "#############E###" ]; // Funções de inicialização, desenho, movimento e rotação aqui... </script> </body> </html> ``` **Tarefas de Implementação:** - [ ] Carregar o `mazeLayout` no array `maze`. - [ ] Desenhar o labirinto, a engrenagem (`P`) e a saída (`E`). - [ ] Implementar controlos de setas para mover `P`. - [ ] Implementar o temporizador de jogo e o contador de movimentos. - [ ] Implementar a rotação do labirinto a cada 5 segundos com deslize por gravidade. - [ ] Detetar vitória (atingir `E`) e derrota (tempo esgotado). **Nota:** Use cores distintas para `#`, `.`, `P`, e `E`. O efeito de rotação deve ser visualmente claro.