Feat/71 minigame flap pet
O que esse MR faz?
Cria um minigame inspirado no Flappy Bird, mas com uma mecânica diferente: em vez do pet pular, ele pilota um aviãozinho. Ao tocar no lado esquerdo da tela, o avião desce; ao tocar no lado direito, o avião sobe, levando o pet junto. Além disso, a cada 5 obstáculos superados, o jogador ganha uma moeda.
Screenshots
| Antes | Depois |
|---|---|
 |
|
 |
 |
Como configurar e validar localmente?
- Acessar a aba de minigames e clicar em FlappyPet
- Clicar em começar na tela de start, e iniciar o jogo
Explicação dos arquivos
app/(tabs)/minigames/FlappyPetGame
Tela de início do jogo, onde é configurado o Provider para compartilhamento de variáveis entre os componentes do minigame.
components/minigames/flappyPet
Componente que controla o fluxo do jogo, como start, game over e um possível pause (planejado para o futuro). Este componente também é responsável por chamar o Renderer, onde o jogo é de fato renderizado.
components/minigames/Renderer
Responsável pela renderização do jogo.
Aqui são utilizados alguns hooks que cuidam da física e da dinâmica do jogo.
É também neste componente que o Pet e os Obstáculos são renderizados na tela.
hooks/minigames/flappyPet
Pasta que contém os hooks utilizados no minigame. Eles são:
-
useCollisionDetection.tsx
Responsável por gerenciar as colisões do pet com o chão e com os obstáculos. -
useGamePhysics.tsx
Gerencia a física aplicada ao pet, como a gravidade, a movimentação de subida e descida ao clicar nos botões, além de controlar a inclinação do avião com o pet dentro. -
useObstacleManager.tsx
Administra os obstáculos, controlando seu movimento no eixo X.
Também contabiliza as coins e o score, já que ambos estão vinculados à quantidade de obstáculos ultrapassados sem colisão. -
useGameManager.tsx
Hook responsável por consumir o context do minigame.
contexts/minigames/flappyPet
Context criado para compartilhar estados como:
- gameOver
- idleGame
- Contagem de coins
- Contagem de score
Dessa forma, evita-se a passagem de dados por várias props até o componente de destino, tornando o código mais limpo e eficiente.
Arquivos modificados
Modifiquei o index.tsx, localizado em app/(tabs)/minigames/, mais especificamente na função handleNavigateToGame.
O motivo da alteração é que essa função estava utilizando o navigation do React Native, enquanto nosso projeto utiliza o Expo Router. Isso, pelo menos no meu ambiente, estava causando um erro na segunda renderização dos minigames (tanto o meu quanto os outros, apenas no mobile).
Ou seja, quando o jogo terminava (game over) e eu tentava jogar novamente, a aplicação quebrava, pois não conseguia recriar corretamente os componentes.
Deixei prints do que foi alterado, caso seja necessário reverter para a implementação anterior.
Observações
Caso algo não funcione como esperado, podem me chamar!
Só consegui testar no meu aparelho Android e não tive acesso a outros dispositivos para validar se está tudo certo, principalmente quanto às colisões e outros possíveis bugs.
Fico à disposição para ajustar qualquer coisa, se necessário.