Criador de Corridas de Bolas de Gude - Simulação Jogo

Por favor, use Three.js para gerar um **jogo com foco em dispositivos móveis** com o tema "**Marble Race Creator**". Por favor, leia primeiro os seguintes requisitos detalhados de design do jogo e, em seguida, gere o código de acordo: ### 1. Recursos & Ambiente * **Estilo Visual:** Crie uma estética **Sandbox Isométrica 2.5D**. Use uma Câmara Ortográfica para lhe dar uma sensação retro/sim (reconhecendo as tags "Pixel" e "2D" enquanto usa renderização 3D). * **Ambiente:** Um plano de chão "Desert Sandbox" plano, baseado numa grelha (cores quentes de areia). O fundo deve ser um céu com um simples gradiente azul. * **Modelos (Procedural):** * **Mármores:** Esferas simples com brilho intenso de cores distintas diferentes (Vermelho, Azul, Verde, Amarelo) para simular texturas de vidro/plástico. * **Pistas:** Blocos ou "calhas" modulares 3D que se encaixam na grelha. Incluir: Carril reto, Carril curvo, Rampas (Planos inclinados) e canais "Dugout". * **Acessórios:** Cactos e Pedras low-poly como obstáculos decorativos. * **Linha de Chegada:** Uma zona de ativação visual representada por uma bandeira com textura axadrezada ou postes. * **Performance:** Use InstancedMesh para as peças da pista e obstáculos para garantir 60FPS em dispositivos móveis. Mantenha a projeção de sombras limitada às mármores. ### 2. Requisitos de Áudio * **BGM:** Uma faixa em loop **estilo 8-bit / Chiptune** animada, que evoca uma vibração de "Construção/Quebra-Cabeças" (brincalhona e repetitiva). * **Efeitos Sonoros (SFX):** * **UI:** Sons de "Clique/Pop" nítidos ao selecionar peças da pista. * **Colocação:** Um som de "Tumba" ou "Estalo" quando uma peça da pista é colocada na grelha. * **Física da Mármore:** Sons de "Claque" para colisões mármore-com-mármore. Um loop de "zumbido" de rolamento que muda de tom com base na velocidade. * **Vitória:** Um som de fanfarra ou de aplausos quando uma mármore atravessa a linha de chegada. ### 3. Ciclo de Jogo * **Modo 1: Modo de Construção (Padrão):** * O jogador seleciona peças de pista a partir de um menu de IU. * Um toque na grelha coloca a peça selecionada. * Um toque numa peça existente roda-a ou remove-a (menu contextual). * O jogador tem de colocar um "Gerador" (Início) e uma "Linha de Meta" (Fim). * **Modo 2: Modo de Corrida:** * O jogador prime "Iniciar/Gerar". * As bolas de gude são geradas a partir do Gerador com física simples (gravidade e momento). * As bolas de gude interagem com os limites físicos das pistas colocadas. * A câmara deve seguir a bola de gude da frente automaticamente ou permitir que o utilizador observe livremente. * A corrida termina quando todas as bolas de gude terminam ou caem do mapa. * **Física:** Implementar um motor de física (como **Cannon.js** ou **Ammo.js**) para lidar com atrito de rolamento, restituição (elasticidade) e colisões com precisão. ### 4. Controlos e Interação Móvel * **Orientação do Ecrã:** Forçada a **Paisagem** para um campo de visão mais amplo da pista. * **Controlo da Câmara (Gestos de Toque):** * **Arrastar com dois dedos:** Mover a câmara pelo mapa (Pan). * **Pinçar:** Ampliar/Reduzir. * *(Razão: Separar o movimento da câmara para dois dedos evita a colocação acidental de pistas).* * **Controlo de Construção:** * **Toque Único:** Colocar o objeto atualmente selecionado no azulejo da grelha. * **Disposição da IU:** * **Barra Inferior:** Uma lista horizontal deslizante de peças construíveis (Pistas, Gerador, Meta, Decoração). Os ícones devem ter pelo menos **48x48px**. * **Canto Superior Direito:** Botão de alternância "Jogar/Reiniciar". * **Canto Superior Esquerdo:** Botão "Limpar Tudo" ou "Anular". * **Feedback:** Realce visual (malha fantasma) no azulejo da grelha antes de colocar. Feedback háptico (vibração) na colocação bem-sucedida ou colisão. Gere um jogo simples usando HTML5, CSS3 e JavaScript vanilla. O jogo deve ser um "Apanha Moedas" 2D. O jogador controla um balão que se move para a esquerda e para a direita na parte inferior do ecrã. Moedas (representadas por círculos amarelos) caem do topo do ecrã em velocidade constante. O objetivo é apanhar o máximo de moedas possível antes do tempo acabar. **Requisitos Técnicos:** 1. **Estrutura HTML:** * Um `<canvas>` com id `gameCanvas` (800x600 pixels). * Um `<div>` para o placar com id `scoreBoard`, mostrando "Pontos: `0`" e "Tempo: `60`s". * Um botão `<button id="startBtn">Iniciar Jogo</button>`. 2. **Estilo CSS (style.css):** * Centralize o canvas no ecrã. * Estilize o placar com uma fonte maior e em negrito. * O botão deve ter um fundo verde e texto branco, com `padding: 10px 20px`. 3. **Lógica JavaScript (script.js):** * **Objetos do Jogo:** Defina objetos para o `jogador` (balão) e para as `moedas` (array). Use classes ou construtores. * **Controlos:** Use os eventos `keydown` para as teclas `ArrowLeft` e `ArrowRight` para mover o balão horizontalmente. O balão não deve sair dos limites do canvas. * **Geração de Moedas:** Crie uma nova moeda num lugar aleatório no topo a cada 1-2 segundos (use `setInterval`). * **Atualização e Desenho:** Num loop de jogo (usando `requestAnimationFrame`): * Limpe o canvas. * Desenhe o balão (um retângulo ou imagem) e todas as moedas (círculos). * Atualize a posição de cada moeda (movendo-a para baixo). * Verifique colisões entre o balão e cada moeda. Em caso de colisão, remova a moeda do array e aumente a pontuação. * Atualize o contador de tempo. * **Estado do Jogo:** O jogo termina quando o tempo chega a 0. Mostre um alerta com a pontuação final e recarregue a página. **Código Base:** ```html <!DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <title>Jogo Apanha Moedas</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="scoreBoard"> <p>Pontos: <span id="score">0</span></p> <p>Tempo: <span id="timer">60</span>s</p> </div> <canvas id="gameCanvas" width="800" height="600"></canvas> <br> <button id="startBtn">Iniciar Jogo</button> <script src="script.js"></script> </body> </html> ``` ```css /* style.css */ body { text-align: center; font-family: Arial, sans-serif; } #gameCanvas { border: 2px solid #333; display: block; margin: 20px auto; background-color: #87CEEB; } #scoreBoard { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; } #startBtn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; } ``` ```javascript // script.js - Esqueleto Inicial const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreElement = document.getElementById('score'); const timerElement = document.getElementById('timer'); const startButton = document.getElementById('startBtn'); // Variáveis do jogo let score = 0; let timeLeft = 60; let gameActive = false; let coins = []; let player = { x: canvas.width / 2 - 25, y: canvas.height - 50, width: 50, height: 50, speed: 7 }; // Adicione a sua lógica aqui (eventos, classes, funções de desenho, loop de jogo, etc.)