# Construir um Jogo Espacial Parte 4: Adicionar um Laser e Detectar Colisões ```mermaid journey title A Sua Jornada de Deteção de Colisões section Fundamentos da Física Entender retângulos: 3: Student Aprender matemática das interseções: 4: Student Compreender sistemas de coordenadas: 4: Student section Mecânicas de Jogo Implementar disparo de laser: 4: Student Adicionar ciclo de vida de objeto: 5: Student Criar regras de colisão: 5: Student section Integração de Sistema Construir deteção de colisões: 5: Student Otimizar desempenho: 5: Student Testar sistemas de interação: 5: Student ``` ## Questionário Pré-Aula [Questionário pré-aula](https://ff-quizzes.netlify.app/web/quiz/35) Pense no momento em Star Wars quando os torpedos de prótons do Luke acertam o porto de escape da Estrela da Morte. Essa detecção precisa de colisão mudou o destino da galáxia! Nos jogos, a detecção de colisão funciona da mesma forma - determina quando objetos interagem e o que acontece a seguir. Nesta lição, vais adicionar armas laser ao teu jogo espacial e implementar a deteção de colisões. Tal como os planejadores de missão da NASA calculam as trajetórias das espaçonaves para evitar detritos, vais aprender a detectar quando os objetos do jogo se cruzam. Vamos dividir isto em passos geríveis que se constroem uns sobre os outros. No final, terás um sistema de combate funcional onde lasers destroem inimigos e colisões desencadeiam eventos no jogo. Estes mesmos princípios de colisão são usados em tudo, desde simulações físicas até interfaces web interativas. ```mermaid mindmap root((Deteção de Colisões)) Physics Concepts Limites do Retângulo Teste de Intersecção Sistemas de Coordenadas Lógica de Separação Game Objects Projetéis Laser Naves Inimigas Personagem Herói Zonas de Colisão Lifecycle Management Criação de Objetos Atualizações de Movimento Marcação de Destruição Limpeza de Memória Event Systems Entrada de Teclado Eventos de Colisão Alterações no Estado do Jogo Efeitos Áudio/Visuais Performance Algoritmos Eficientes Otimização da Taxa de Frames Gestão de Memória Particionamento Espacial ``` ✅ Faz uma pequena pesquisa sobre o primeiro jogo de computador alguma vez criado. Qual era a sua funcionalidade? ## Deteção de colisão A deteção de colisão funciona como os sensores de proximidade do módulo lunar Apollo - verifica constantemente as distâncias e dispara alertas quando os objetos ficam muito próximos. Nos jogos, este sistema determina quando os objetos interagem e o que deve acontecer a seguir. A abordagem que vamos usar trata cada objeto do jogo como um retângulo, semelhante a como os sistemas de controlo de tráfego aéreo usam formas geométricas simplificadas para rastrear aeronaves. Este método retangular pode parecer básico, mas é computacionalmente eficiente e funciona bem para a maioria dos cenários de jogo. ### Representação do retângulo Cada objeto do jogo precisa de limites coordenados, semelhante a como o rover Mars Pathfinder mapeou a sua localização na superfície marciana. Eis como definimos estas coordenadas limites: ```mermaid flowchart TD A["🎯 Objeto de Jogo"] --> B["📍 Posição (x, y)"] A --> C["📏 Dimensões (largura, altura)"] B --> D["Topo: y"] B --> E["Esquerda: x"] C --> F["Fundo: y + altura"] C --> G["Direita: x + largura"] D --> H["🔲 Limites do Retângulo"] E --> H F --> H G --> H H --> I["Deteção de Colisões Pronta"] style A fill:#e3f2fd style H fill:#e8f5e8 style I fill:#fff3e0 ``` ```javascript rectFromGameObject() { return { top: this.y, left: this.x, bottom: this.y + this.height, right: this.x + this.width } } ``` **Vamos decompor isto:** - **Borda superior**: É simplesmente onde o teu objeto começa verticalmente (a sua posição y) - **Borda esquerda**: Onde começa horizontalmente (a sua posição x) - **Borda inferior**: Soma a altura à posição y - agora sabes onde termina! - **Borda direita**: Soma a largura à posição x - e tens o limite completo ### Algoritmo de interseção Detetar interseções de retângulos usa uma lógica similar à do Telescópio Espacial Hubble ao determinar se objetos celestes estão sobrepostos no seu campo de visão. O algoritmo verifica separação: ```mermaid flowchart LR A["Retângulo 1"] --> B{"Testes de Separação"} C["Retângulo 2"] --> B B --> D["R2 esquerda > R1 direita?"] B --> E["R2 direita < R1 esquerda?"] B --> F["R2 cima > R1 baixo?"] B --> G["R2 baixo < R1 cima?"] D --> H{"Algum Verdadeiro?"} E --> H F --> H G --> H H -->|Sim| I["❌ Sem Colisão"] H -->|Não| J["✅ Colisão Detetada"] style B fill:#e3f2fd style I fill:#ffebee style J fill:#e8f5e8 ``` ```javascript function intersectRect(r1, r2) { return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top); } ``` **O teste de separação funciona como sistemas radar:** - Está o retângulo 2 completamente à direita do retângulo 1? - Está o retângulo 2 completamente à esquerda do retângulo 1? - Está o retângulo 2 completamente abaixo do retângulo 1? - Está o retângulo 2 completamente acima do retângulo 1? Se nenhuma destas condições for verdadeira, os retângulos devem estar sobrepostos. Esta abordagem espelha como operadores de radar determinam se duas aeronaves estão a distâncias seguras. ## Gestão do ciclo de vida dos objetos Quando um laser acerta num inimigo, ambos os objetos precisam ser removidos do jogo. No entanto, eliminar objetos no meio de um ciclo pode causar falhas - uma lição aprendida da forma difícil em sistemas de computador antigos como o Apollo Guidance Computer. Em vez disso, usamos uma abordagem de "marcar para eliminação" que remove os objetos com segurança entre frames. ```mermaid stateDiagram-v2 [*] --> Active: Objeto Criado Active --> Collided: Colisão Detetada Collided --> MarkedDead: Definir morto = verdadeiro MarkedDead --> Filtered: Quadro Seguinte Filtered --> [*]: Objeto Removido Active --> OutOfBounds: Sai do Ecrã OutOfBounds --> MarkedDead note right of MarkedDead Seguro para continuar quadro atual end note note right of Filtered Objetos removidos entre quadros end note ``` Assim é como marcamos algo para remoção: ```javascript // Marcar objeto para remoção enemy.dead = true; ``` **Por que esta abordagem funciona:** - Marcamos o objeto como "morto" mas não o apagamos imediatamente - Isto permite que o frame atual do jogo termine em segurança - Evita falhas por tentar usar algo que já desapareceu! Depois, filtramos os objetos marcados antes do próximo ciclo de renderização: ```javascript gameObjects = gameObjects.filter(go => !go.dead); ``` **O que esta filtragem faz:** - Cria uma lista nova apenas com os objetos "vivos" - Descarte tudo o que foi marcado como morto - Mantém o teu jogo a correr suavemente - Evita acumulação de objetos destruídos e aumento de memória ## Implementando a mecânica do laser Os projéteis laser nos jogos funcionam pelo mesmo princípio dos torpedos de fótóns em Star Trek - são objetos discretos que viajam em linhas rectas até acertarem em algo. Cada pressão na tecla espaço cria um novo objeto laser que se move pelo ecrã. Para isto funcionar, precisamos coordenar algumas peças diferentes: **Componentes chave para implementar:** - **Criar** objetos laser que aparecem na posição do herói - **Gerir** a entrada do teclado para disparar a criação do laser - **Controlar** o movimento e ciclo de vida do laser - **Implementar** a representação visual dos projéteis laser ## Implementar controlo da taxa de disparo Taxas ilimitadas de disparo sobrecarregariam o motor do jogo e tornariam a jogabilidade demasiado fácil. Sistemas de armas reais enfrentam restrições semelhantes - até os phasers da USS Enterprise precisavam de tempo para recarregar entre disparos. Vamos implementar um sistema de cooldown que evita disparos em spam, mantendo o controlo responsivo: ```mermaid sequenceDiagram participant Player participant Weapon participant Cooldown participant Game Player->>Weapon: Premir Barra de Espaço Weapon->>Cooldown: Verificar se está pronto alt Arma está pronta Cooldown->>Weapon: pronto = true Weapon->>Game: Criar Laser Weapon->>Cooldown: Iniciar novo cooldown Cooldown->>Cooldown: pronto = false Note over Cooldown: Esperar 500ms Cooldown->>Cooldown: pronto = true else Arma está a arrefecer Cooldown->>Weapon: pronto = false Weapon->>Player: Sem ação end ``` ```javascript class Cooldown { constructor(time) { this.cool = false; setTimeout(() => { this.cool = true; }, time); } } class Weapon { constructor() { this.cooldown = null; } fire() { if (!this.cooldown || this.cooldown.cool) { // Criar projétil de laser this.cooldown = new Cooldown(500); } else { // A arma ainda está a arrefecer } } } ``` **Como o cooldown funciona:** - Quando criado, a arma começa "quente" (não pode disparar ainda) - Após o período de timeout, fica "fria" (pronta para disparar) - Antes de disparar, verificamos: "A arma está fria?" - Isto previne cliques em spam enquanto mantém o controlo responsivo ✅ Consulta a lição 1 da série do jogo espacial para relembrar sobre cooldowns. ## Construir o sistema de colisão Irás estender o código existente do teu jogo espacial para criar um sistema de deteção de colisões. Tal como o sistema automatizado da Estação Espacial Internacional para evitar colisões, o teu jogo vai monitorizar continuamente as posições dos objetos e reagir às interseções. Começando com o código da lição anterior, vais adicionar deteção de colisões com regras específicas que governam as interações dos objetos. > 💡 **Dica Profissional**: O sprite do laser já está incluído na tua pasta de assets e referenciado no teu código, pronto para implementação. ### Regras de colisão para implementar **Mecânicas do jogo para adicionar:** 1. **Laser atinge inimigo**: O inimigo é destruído quando atingido por um projétil laser 2. **Laser atinge o limite do ecrã**: Laser é removido quando atinge a borda superior do ecrã 3. **Colisão entre inimigo e herói**: Ambos os objetos são destruídos quando se cruzam 4. **Inimigo atinge a parte inferior**: Condição de game over quando inimigos chegam ao fundo do ecrã ### 🔄 **Verificação Pedagógica** **Fundamentos da Deteção de Colisão**: Antes de implementar, assegura que compreendes: - ✅ Como os limites dos retângulos definem zonas de colisão - ✅ Por que o teste de separação é mais eficiente que o cálculo de interseção - ✅ A importância da gestão do ciclo de vida dos objetos nos loops do jogo - ✅ Como sistemas orientados a eventos coordenam respostas de colisão **Autoavaliação Rápida**: O que aconteceria se apagasses objetos imediatamente em vez de os marcares? *Resposta: Apagar no meio do ciclo pode causar falhas ou saltar objetos na iteração* **Compreensão Física**: Agora entendes: - **Sistemas de Coordenadas**: Como posição e dimensões criam limites - **Lógica de Interseção**: Princípios matemáticos por detrás da deteção de colisão - **Otimização de Performance**: Por que algoritmos eficientes são importantes em sistemas em tempo real - **Gestão de Memória**: Padrões seguros de ciclo de vida dos objetos para estabilidade ## Configurar o ambiente de desenvolvimento Boas notícias - já preparamos a maior parte do trabalho para ti! Todos os teus assets do jogo e a estrutura básica estão na subpasta `your-work`, prontos para adicionares as funcionalidades fixas de colisão. ### Estrutura do projeto ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` **Compreender a estrutura dos ficheiros:** - **Contém** todas as imagens dos sprites necessárias para os objetos do jogo - **Inclui** o documento HTML principal e o ficheiro da aplicação JavaScript - **Fornece** a configuração do package para o servidor de desenvolvimento local ### Iniciar o servidor de desenvolvimento Navega até à pasta do teu projeto e inicia o servidor local: ```bash cd your-work npm start ``` **Esta sequência de comandos:** - **Muda** o diretório para a pasta do projeto onde estás a trabalhar - **Inicia** um servidor HTTP local em `http://localhost:5000` - **Serve** os teus ficheiros do jogo para teste e desenvolvimento - **Permite** desenvolvimento em tempo real com recarregamentos automáticos Abre o navegador e acede a `http://localhost:5000` para veres o estado atual do jogo com o herói e inimigos renderizados no ecrã. ### Implementação passo a passo Como a abordagem sistemática que a NASA usou para programar a espaçonave Voyager, vamos implementar a deteção de colisão metodicamente, construindo cada componente passo a passo. ```mermaid flowchart TD A["1. Limites do Retângulo"] --> B["2. Deteção de Interseção"] B --> C["3. Sistema de Laser"] C --> D["4. Gestão de Eventos"] D --> E["5. Regras de Colisão"] E --> F["6. Sistema de Cooldown"] G["Limites do Objeto"] --> A H["Algoritmo de Física"] --> B I["Criação de Projetil"] --> C J["Entrada do Teclado"] --> D K["Lógica do Jogo"] --> E L["Limitação de Taxa"] --> F F --> M["🎮 Jogo Completo"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 style F fill:#fce4ec style M fill:#e1f5fe ``` #### 1. Adicionar limites de colisão em retângulo Primeiro, vamos ensinar os nossos objetos do jogo a descrever os seus limites. Adiciona este método à tua classe `GameObject`: ```javascript rectFromGameObject() { return { top: this.y, left: this.x, bottom: this.y + this.height, right: this.x + this.width, }; } ``` **Este método realiza:** - **Cria** um objeto retângulo com coordenadas de limites precisas - **Calcula** as bordas inferior e direita usando posição mais dimensões - **Devolve** um objeto pronto para os algoritmos de deteção de colisão - **Fornece** uma interface padronizada para todos os objetos do jogo #### 2. Implementar deteção de interseção Agora vamos criar o nosso detetor de colisões - uma função que sabe quando dois retângulos estão sobrepostos: ```javascript function intersectRect(r1, r2) { return !( r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top ); } ``` **Este algoritmo funciona:** - **Testa** quatro condições de separação entre os retângulos - **Devolve** `false` se qualquer condição de separação for verdadeira - **Indica** colisão quando não existe separação - **Usa** lógica de negação para teste eficiente de interseção #### 3. Implementar sistema de disparo do laser Aqui é que as coisas ficam empolgantes! Vamos configurar o sistema de disparo do laser. ##### Constantes de mensagens Primeiro, define alguns tipos de mensagens para que diferentes partes do jogo possam comunicar entre si: ```javascript KEY_EVENT_SPACE: "KEY_EVENT_SPACE", COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER", COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", ``` **Estas constantes fornecem:** - **Padronizam** nomes de eventos por toda a aplicação - **Permitem** comunicação consistente entre sistemas do jogo - **Previnem** erros de digitação no registo de eventos ##### Tratamento da entrada do teclado Adiciona deteção da tecla espaço no teu listener de eventos de tecla: ```javascript } else if(evt.keyCode === 32) { eventEmitter.emit(Messages.KEY_EVENT_SPACE); } ``` **Este handler de entrada:** - **Detecta** a pressão da tecla espaço usando keyCode 32 - **Emite** uma mensagem de evento padronizada - **Permite** lógica de disparo desacoplada ##### Configuração do listener de eventos Regista o comportamento de disparo na tua função `initGame()`: ```javascript eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { if (hero.canFire()) { hero.fire(); } }); ``` **Este listener de evento:** - **Responde** a eventos da tecla espaço - **Verifica** o estado do cooldown para disparo - **Dispara** a criação do laser quando permitido Adiciona manipulação de colisão para interações entre laser e inimigo: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { first.dead = true; second.dead = true; }); ``` **Este handler de colisão:** - **Recebe** dados do evento de colisão com ambos os objetos - **Marca** ambos os objetos para remoção - **Garante** limpeza adequada após colisão #### 4. Criar a classe Laser Implementa um projétil laser que move para cima e gere o seu próprio ciclo de vida: ```javascript class Laser extends GameObject { constructor(x, y) { super(x, y); this.width = 9; this.height = 33; this.type = 'Laser'; this.img = laserImg; let id = setInterval(() => { if (this.y > 0) { this.y -= 15; } else { this.dead = true; clearInterval(id); } }, 100); } } ``` **Esta implementação da classe:** - **Estende** GameObject para herdar funcionalidade base - **Define** dimensões apropriadas para o sprite laser - **Cria** movimento automático ascendente usando `setInterval()` - **Gere** autodestruição ao atingir o topo do ecrã - **Controla** temporização de animação e limpeza própria #### 5. Implementar sistema de deteção de colisão Cria uma função abrangente de deteção de colisão: ```javascript function updateGameObjects() { const enemies = gameObjects.filter(go => go.type === 'Enemy'); const lasers = gameObjects.filter(go => go.type === "Laser"); // Testar colisões entre laser e inimigo lasers.forEach((laser) => { enemies.forEach((enemy) => { if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, { first: laser, second: enemy, }); } }); }); // Remover objetos destruídos gameObjects = gameObjects.filter(go => !go.dead); } ``` **Este sistema de colisão:** - **Filtra** os objetos de jogo por tipo para testes eficientes - **Testa** cada laser contra cada inimigo para interseções - **Emite** eventos de colisão quando as interseções são detetadas - **Limpa** objetos destruídos após o processamento da colisão > ⚠️ **Importante**: Adiciona `updateGameObjects()` ao teu loop principal do jogo em `window.onload` para ativar a deteção de colisão. #### 6. Adicionar sistema de cooldown à classe Hero Melhora a classe Hero com mecânicas de disparo e limitação da taxa de disparo: ```javascript class Hero extends GameObject { constructor(x, y) { super(x, y); this.width = 99; this.height = 75; this.type = "Hero"; this.speed = { x: 0, y: 0 }; this.cooldown = 0; } fire() { gameObjects.push(new Laser(this.x + 45, this.y - 10)); this.cooldown = 500; let id = setInterval(() => { if (this.cooldown > 0) { this.cooldown -= 100; } else { clearInterval(id); } }, 200); } canFire() { return this.cooldown === 0; } } ``` **Compreendendo a classe Hero melhorada:** - **Inicializa** o temporizador de cooldown a zero (pronto para disparar) - **Cria** objetos laser posicionados acima da nave do herói - **Define** o período de cooldown para evitar disparos rápidos - **Decrementa** o temporizador de cooldown usando atualizações baseadas em intervalos - **Fornece** verificação do estado de disparo através do método `canFire()` ### 🔄 **Verificação Pedagógica** **Compreensão Completa do Sistema**: Verifica o teu domínio do sistema de colisão: - ✅ Como os limites dos retângulos permitem deteção eficiente de colisão? - ✅ Por que a gestão do ciclo de vida dos objetos é crítica para a estabilidade do jogo? - ✅ Como o sistema de cooldown previne problemas de performance? - ✅ Que papel tem a arquitetura orientada a eventos na gestão das colisões? **Integração do Sistema**: A tua deteção de colisão demonstra: - **Precisão Matemática**: Algoritmos de interseção de retângulos - **Otimização de Performance**: Padrões eficientes para teste de colisão - **Gestão de Memória**: Criação e destruição segura de objetos - **Coordenação de Eventos**: Comunicação desacoplada do sistema - **Processamento em Tempo Real**: Ciclos de atualização baseados em frames **Padrões Profissionais**: Implementaste: - **Separação de Responsabilidades**: Física, renderização e input separados - **Design Orientado a Objetos**: Herança e polimorfismo - **Gestão de Estado**: Ciclo de vida do objeto e rastreio do estado do jogo - **Otimização de Performance**: Algoritmos eficientes para uso em tempo real ### Testar a tua implementação O teu jogo espacial agora inclui deteção completa de colisões e mecânicas de combate. 🚀 Testa estas novas funcionalidades: - **Move-te** com as setas para verificar os controlos de movimento - **Dispara lasers** com a tecla espaço – nota como o cooldown previne spam de cliques - **Observa colisões** quando os lasers atingem inimigos, desencadeando remoção - **Confirma limpeza** à medida que objetos destruídos desaparecem do jogo Conseguiste implementar com sucesso um sistema de deteção de colisões usando os mesmos princípios matemáticos que guiam a navegação espacial e a robótica. ### ⚡ **O Que Podes Fazer Nos Próximos 5 Minutos** - [ ] Abre as Ferramentas de Desenvolvedor do navegador e coloca breakpoints na tua função de deteção de colisões - [ ] Tenta modificar a velocidade do laser ou o movimento dos inimigos para ver os efeitos da colisão - [ ] Experimenta valores diferentes de cooldown para testar as taxas de disparo - [ ] Adicionar instruções `console.log` para rastrear eventos de colisão em tempo real ### 🎯 **O que pode realizar nesta hora** - [ ] Completar o questionário pós-aula e compreender algoritmos de deteção de colisão - [ ] Adicionar efeitos visuais como explosões quando ocorrem colisões - [ ] Implementar diferentes tipos de projéteis com propriedades variadas - [ ] Criar power-ups que aumentem temporariamente as habilidades do jogador - [ ] Adicionar efeitos sonoros para tornar as colisões mais satisfatórias ### 📅 **A sua programação física para uma semana** - [ ] Completar o jogo espacial completo com sistemas de colisão aperfeiçoados - [ ] Implementar formas de colisão avançadas além de retângulos (círculos, polígonos) - [ ] Adicionar sistemas de partículas para efeitos realistas de explosão - [ ] Criar comportamentos complexos dos inimigos com evasão de colisões - [ ] Otimizar a deteção de colisão para melhor desempenho com muitos objetos - [ ] Adicionar simulação física como momento e movimento realista ### 🌟 **O domínio da física de jogos para um mês** - [ ] Construir jogos com motores físicos avançados e simulações realistas - [ ] Aprender deteção de colisão 3D e algoritmos de partição espacial - [ ] Contribuir para bibliotecas físicas open source e motores de jogos - [ ] Dominar otimização de desempenho para aplicações gráficas intensivas - [ ] Criar conteúdos educativos sobre física de jogos e deteção de colisão - [ ] Construir um portefólio mostrando competências avançadas em programação física ## 🎯 O seu calendário para domínio da deteção de colisão ```mermaid timeline title Progressão de Aprendizagem em Detecção de Colisões & Física de Jogos section Fundação (10 minutos) Rectangle Math: Sistemas de coordenadas : Cálculos de limites : Rastreio de posição : Gestão de dimensões section Design de Algoritmos (20 minutos) Intersection Logic: Teste de separação : Detecção de sobreposição : Otimização de desempenho : Gestão de casos limite section Implementação de Jogos (30 minutos) Object Systems: Gestão do ciclo de vida : Coordenação de eventos : Rastreio de estado : Limpeza de memória section Funcionalidades Interativas (40 minutos) Combat Mechanics: Sistemas de projéteis : Tempos de recarga de armas : Cálculo de dano : Feedback visual section Física Avançada (50 minutos) Real-time Systems: Otimização da taxa de frames : Particionamento espacial : Resposta a colisões : Simulação de física section Técnicas Profissionais (1 semana) Game Engine Concepts: Sistemas de componentes : Pipelines de física : Perfilização de desempenho : Otimização multiplataforma section Aplicações na Indústria (1 mês) Production Skills: Otimização em larga escala : Colaboração em equipa : Desenvolvimento de motores : Implementação em plataformas ``` ### 🛠️ Resumo da sua caixa de ferramentas de física para jogos Após completar esta aula, agora dominou: - **Matemática da Colisão**: Algoritmos de interseção de retângulos e sistemas de coordenadas - **Otimização de Desempenho**: Deteção de colisão eficiente para aplicações em tempo real - **Gestão do Ciclo de Vida do Objeto**: Padrões seguros de criação, atualização e destruição - **Arquitetura Orientada a Eventos**: Sistemas desacoplados para resposta a colisões - **Integração no Ciclo do Jogo**: Atualizações físicas baseadas em frames e coordenação de renderização - **Sistemas de Entrada**: Controlo responsivo com limitação de taxa e feedback - **Gestão de Memória**: Pooling eficiente de objetos e estratégias de limpeza **Aplicações no Mundo Real**: As suas competências em deteção de colisão aplicam-se diretamente a: - **Simulações Interativas**: Modelação científica e ferramentas educativas - **Design de Interfaces**: Interações drag-and-drop e deteção de toque - **Visualização de Dados**: Gráficos interativos e elementos clicáveis - **Desenvolvimento Móvel**: Reconhecimento de gestos tácteis e gestão de colisões - **Programação Robótica**: Planeamento de trajetórias e evasão de obstáculos - **Computação Gráfica**: Ray tracing e algoritmos espaciais **Competências Profissionais Adquiridas**: Agora pode: - **Desenhar** algoritmos eficientes para deteção de colisões em tempo real - **Implementar** sistemas físicos que escalam com a complexidade dos objetos - **Depurar** sistemas de interação complexos usando princípios matemáticos - **Otimizar** desempenho para diferentes hardwares e capacidades de browser - **Projetar** sistemas de jogos manuteníveis usando padrões de design comprovados **Conceitos de Desenvolvimento de Jogos Dominados**: - **Simulação Física**: Deteção e resposta de colisão em tempo real - **Engenharia de Desempenho**: Algoritmos otimizados para aplicações interativas - **Sistemas de Eventos**: Comunicação desacoplada entre componentes do jogo - **Gestão de Objetos**: Padrões eficazes de ciclo de vida para conteúdos dinâmicos - **Gestão de Entrada**: Controlo responsivo com feedback apropriado **Próximo Nível**: Está preparado para explorar motores físicos avançados como Matter.js, implementar deteção de colisões 3D ou criar sistemas complexos de partículas! 🌟 **Conquista Desbloqueada**: Construiu um sistema completo de interação baseado em física com deteção de colisão profissional! ## Desafio do GitHub Copilot Agent 🚀 Use o modo Agent para completar o seguinte desafio: **Descrição:** Melhore o sistema de deteção de colisão implementando power-ups que surgem aleatoriamente e oferecem habilidades temporárias quando recolhidos pela nave herói. **Prompt:** Crie uma classe PowerUp que estenda GameObject e implemente a deteção de colisão entre o herói e os power-ups. Adicione pelo menos dois tipos de power-ups: um que aumenta a cadência de tiro (reduz o cooldown) e outro que cria um escudo temporário. Inclua lógica de geração que crie power-ups em intervalos e posições aleatórias. --- ## 🚀 Desafio Adicione uma explosão! Veja os recursos do jogo em [o repositório Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) e tente adicionar uma explosão quando o laser atinge um alienígena ## Questionário Pós-Aula [Questionário pós-aula](https://ff-quizzes.netlify.app/web/quiz/36) ## Revisão e Autoestudo Experimente os intervalos no seu jogo até agora. O que acontece quando os altera? Leia mais sobre [eventos de temporização em JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). ## Tarefa [Explore colisões](assignment.md) --- **Aviso Legal**: Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos por garantir a precisão, deve-se ter em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes da utilização desta tradução.