Zombies Took My Daughter - Ação Jogo

Por favor, usa Three.js para gerar um **jogo mobile-first** com o tema "Os Zombies Levaram a Minha Filha". Por favor, lê primeiro os seguintes requisitos de design de jogo detalhados, e depois gera o código de acordo: ### 1. Assets & Ambiente * **Estilo Visual:** Usa uma perspetiva **2.5D Side-Scrolling**. O estilo artístico deve ser **Low-Poly Cel-Shaded** (toon shader) para imitar o aspeto angular e sombrio de banda desenhada do jogo flash original. Usa cores de alto contraste: pretos profundos, cinzas urbanos e vermelho vibrante para sangue/perigo. * **Modelos de Personagem:** * **Protagonista:** Um modelo humano masculino simples e cubiforme, vestindo um colete e calças de ganga. * **Zombies:** Variações do modelo humano com tons de pele verde/cinza e texturas de roupa esfarrapada. * **Ambiente:** Uma cidade em decadência. Usa geometrias simples (cubos) para representar plataformas de metro, ruas da cidade e apartamentos abandonados. * **Fundo de Parallax:** Cria profundidade colocando linhas do céu da cidade simplificadas em camadas de fundo que se movem mais devagar que o primeiro plano. * **Iluminação:** Usa iluminação ambiente cozida para desempenho. Usa uma única luz direcional para projetar sombras duras e dramáticas. * **VFX:** Emissores de partículas simples para respingos de sangue (cubos vermelhos) ao impacto, e clarões de focinho para armas de fogo. * **Otimização:** Limita a contagem de polígonos da cena para navegadores móveis. Usa atlas de texturas para reduzir as chamadas de desenho. Garante que todos os assets são pré-carregados antes do jogo começar. ### 2. Requisitos de Áudio * **BGM (Música de Fundo):** Um loop de sintetizador industrial lo-fi e de suspense. Deve sentir-se urgente e sombrio. Aumenta o tempo quando há mais de 3 zombies em ecrã. * **Efeitos Sonoros (SFX):** * **UI:** Cliques mecânicos para seleção de menu. * **Combate:** Sons exagerados de "Murro/Impacto" (baques e estalos). Sons de disparo (se aplicável). * **Zombies:** Gemidos e sibilos aleatórios. Um som específico de "Alerta" quando avistam o jogador. * **Ambiente:** Sirenes ao longe ou ruído de vento. ### 3. Ciclo de Jogo * **Objetivo Principal:** O jogador tem um tempo limitado (simular as "36 horas" via um temporizador de contagem decrescente) para viajar entre os nós da cidade e encontrar a filha. * **Mecânicas de Combate:** * Combate em tempo real do género beat-'em-up. O jogador pode dar murros, pontapés ou usar armas apanhadas (pé-de-cabra, espingarda). * **Sistema de Saúde:** O jogador tem uma barra de saúde. Se chegar a 0, é Game Over. * **Exploração:** O jogador move-se para a esquerda/direita através de um nível linear. Tem de derrotar todos os zombies numa "zona" para avançar para a saída. * **Condições de Vitória/Derrota:** * **Vitória:** Concluir com sucesso o nível do chefe final e interagir com o NPC "Filha". * **Derrota:** A saúde chegar a zero ou o Limite de Tempo expirar. ### 4. Controlos & Interação para Móvel * **Orientação do Ecrã:** Paisagem (Forçar a lógica de modo paisagem no CSS/JS). * **Controlos Virtuais:** * **Lado Esquerdo:** Um Joystick Virtual dinâmico para movimento (Movimento Esquerda/Direita, Cima/Baixo para movimento em profundidade no plano 2.5D). * **Lado Direito:** Botões de ação grandes e distintos: [A] Atacar, [B] Saltar/Esquivar, [X] Interagir (Apanhar item/Abrir porta). Garantir que os botões têm pelo menos 64x64 píxeis como área de toque. * **Câmara:** A câmara deve seguir suavemente o personagem do jogador com um ligeiro atraso (lerp) para evitar enjoos de movimento. * **Feedback:** * **Visual:** Agitação do ecrã (tremor da câmara) em impactos fortes. Piscar o personagem a vermelho ao sofrer dano. * **Háptico:** Usar `navigator.vibrate(50)` quando o jogador atinge um zombie ou sofre dano. Gere um jogo de navegador simples usando HTML5, Canvas e JavaScript. O jogo deve ter as seguintes características: 1. **Tema:** Um herói num mundo pixelado deve coletar cristais de energia enquanto evita inimigos deslizantes. 2. **Mecânicas do Jogador:** * Controla um personagem (16x16 pixels) com as teclas `WASD`. * Pode recolher cristais (pontos +10). * Se tocar num inimigo, perde uma vida. O jogo termina com 0 vidas. * Uma barra de "super salto" carrega ao recolher 5 cristais, permitindo um salto mais alto (`Barra de Espaço`). 3. **Elementos do Jogo:** * `Canvas` de 800x600 pixels. * 10 cristais, posicionados aleatoriamente no início. * 4 inimigos que se movem para a esquerda e direita em plataformas. * Contadores para: `Pontuação: <span id="score">0</span>`, `Vidas: <span id="lives">3</span>`, `Carga Super Salto: <progress id="jumpCharge" value="0" max="5"></progress>`. 4. **Estilo Visual:** * Arte em pixel art estilizada, cores vibrantes. * O fundo deve ser um gradiente simples de céu. ```css body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } canvas { border: 2px solid white; box-shadow: 0 0 20px #0ff; } ``` 5. **Requisitos Técnicos:** * Use `requestAnimationFrame` para o ciclo do jogo. * Colisão simples baseada em caixas (AABB). * O código deve estar todo num único ficheiro `index.html`. ```html <!DOCTYPE html> <html> <head> <title>Herói Pixel: Caçador de Cristais</title> <style> /* O CSS acima vai aqui */ </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <div id="ui"> <!-- Os contadores vão aqui --> </div> <script> // Todo o código JavaScript do jogo aqui </script> </body> </html> ``` Inclua comentários no código para explicar as secções principais.