Cube Escape: Caso 23 - Aventura Jogo

Utilize o Three.js para gerar um **jogo com foco em dispositivos móveis** com o tema "**Sala de Escape do Detetive Surrealista**" (inspirado em Cube Escape: Case 23). Por favor, leia primeiro os seguintes requisitos detalhados de design de jogo e, em seguida, gere o código de acordo: ### 1. Recursos & Ambiente * **Estilo Visual:** Crie uma estética de "Escape Room" em primeira pessoa. O ambiente deve ser um cubo 3D (sala) onde o jogador está posicionado exatamente no centro. * **Direção de Arte:** Utilize uma paleta "Noir Surrealista": tons sépia, verdes dessaturados e castanhos escuros. As paredes devem parecer papel de parede vintage. * **Geometria & Adereços:** * **A Sala:** Uma geometria de caixa simples com normais invertidas (ou 4 planos separados) representando as quatro paredes da cena de investigação. * **Parede 1 (A Cena):** Um contorno de giz de um corpo no chão (use renderização de linhas simples) e um "Quadro de Evidências" na parede. * **Parede 2 (A Janela):** Uma moldura de janela com vista para um fundo estático de um lago escuro e sinistro ("Rusty Lake"). * **Parede 3 (A Porta):** Uma porta trancada com um teclado numérico ou fechadura. * **Parede 4 (O Armazenamento):** Um armário ou secretária vintage com gavetas interativas. * **Otimização:** Use primitivas de baixo polígono (`BoxGeometry`, `PlaneGeometry`) para os móveis para garantir FPS alto em dispositivos móveis. Use sombreamento simples (`MeshLambertMaterial`) para reduzir a carga na GPU. ### 2. Requisitos de Áudio * **BGM (Música de Fundo):** Uma faixa ambiente procedural e perturbadora, utilizando um oscilador HTML5 ou uma referência de áudio em loop simples. Estilo: Jazz-noir lento, drones de baixa frequência, ligeiramente desafinado. * **Efeitos Sonoros (SFX):** * **Interação:** Um som de "farfalhar de papel" ao examinar evidências. * **Inventário:** Um som distinto de "estalo" ou "clique" ao selecionar um item. * **Navegação:** Um som de "whoosh" ao rodar a vista da câmara. * **Sucesso:** Um acorde dramático quando um puzzle é resolvido. ### 3. Ciclo de Jogo * **Navegação:** O jogador não se pode mover fisicamente, apenas rodar a sua vista 90 graus de cada vez para enfrentar uma das quatro paredes. * **Investigação (Clicar e Apontar):** * Tocar em objetos ativa um zoom ou recolhe um item. * Exemplo de Puzzle: Encontrar uma "Chave" atrás da planta na Parede 2 -> Adicionar ao Inventário -> Selecionar Chave -> Tocar na Porta na Parede 3 para abrir. * **Sistema de Inventário:** Uma barra de UI dedicada no fundo do ecrã. Tocar num item realça-o. Tocar no ambiente enquanto um item está realçado tenta usá-lo. * **Condição de Vitória:** Resolver o puzzle final (ex.: encontrar o código da porta) e clicar na saída aberta. ### 4. Controlos e Interação Móvel * **Controlo da Câmara (Deslizar):** Implementar listeners `touchstart` e `touchend`. Um gesto de deslize horizontal deve rodar a câmara 90 graus suavemente para a próxima parede (rotação com snap-to-grid). * **UI de Navegação (Alternativa):** Renderizar duas setas semitransparentes (Esquerda/Direita) nas bordas do ecrã para utilizadores que prefiram tocar para rodar. * **Interação (Raycasting):** * Usar `THREE.Raycaster` mapeado para coordenadas de toque. * Garantir que as hitboxes para objetos interativos são ligeiramente maiores do que as suas malhas visuais para acomodar a entrada de "dedo gordo" em ecrãs móveis. * **Disposição da UI:** * **Barra de Inventário:** Fixa no fundo (altura: 15% do ecrã), com slots quadrados (tamanho mínimo 44px). * **Sobreposição de Mensagens:** Uma área de texto no centro superior para exibir pistas (ex.: "Está trancada", "Encontrei uma chave"). * **Feedback:** Adicionar um ligeiro tremor de câmara (recuo visual) quando o jogador tenta usar o item errado num objeto. Crie um jogo educativo de biologia usando a API HTML Canvas. O jogo deve ajudar os alunos a aprender sobre as partes da célula. **Requisitos Técnicos:** * Use HTML5, CSS3 e JavaScript (ES6+). * A API Canvas deve ser usada para todos os gráficos e interatividade. * A estrutura do código deve ser modular (ex: classes separadas para Célula, Organelos, Controlador do Jogo). * Inclua um loop de jogo principal com `requestAnimationFrame`. **Mecânicas do Jogo:** 1. **Cenário:** Uma célula animal ou vegetal isolada e ampliada. 2. **Objetivo:** O jogador deve arrastar e largar organelos (ex: núcleo, mitocôndria, cloroplasto) das suas etiquetas para a posição correta dentro da célula. 3. **Feedback:** * Um som de *clique* suave ao apanhar um organelo. * Efeito visual (ex: brilho) ao pairar sobre um local correto. * Mensagem de "Correto!" + breve facto ao posicionar um organelo corretamente. * O organelo volta à sua etiqueta se for largado numa zona incorreta. 4. **Progressão:** Os organelos são apresentados sequencialmente. Todos devem ser colocados para completar o nível. **Elementos Específicos (exemplo):** ```html <div id="game-container"> <canvas id="cell-canvas" width="800" height="600"></canvas> <div id="organelle-palette"> <!-- Elementos arrastáveis gerados por JS --> </div> <div id="fact-panel" aria-live="polite"></div> </div> ``` **Conteúdo Educativo (traduzir para PT-PT):** * Título: "Monta a Célula: Explorador de Organelos" * Texto introdutório: "Bem-vindo! Arrasta cada organelo para o local correto na célula para aprender sobre a sua função." * Factos por organelo (ex: "O núcleo contém o ADN e controla as atividades da célula."). **Funcionalidades a Implementar:** - [ ] Sistema de arrastar e largar no Canvas. - [ ] Deteção de colisão para largar válido. - [ ] Temporizador opcional e sistema de pontuação. - [ ] Controlo de estado do jogo (a decorrer, concluído). - [ ] Botão de reinício. **Notas:** * O design deve ser limpo, colorido e apropriado para o ensino secundário. * Use comentários no código para explicar a lógica principal. * A experiência deve ser totalmente acessível pelo teclado (teclas Tab/Enter/Seta).