🍄 Mange's Bros

Um jogo de aprendizagem inspirado em Super Mario Bros, onde o conhecimento é a chave para avançar.

---

📚 Informações do Projeto

Disciplina: Programação Web Frontend

Docente: Mariany Morais

Curso: Técnico em Desenvolvimento de Sistemas — 3º Semestre

Instituição: SENAI Roberto Mange

Ano: 2026

---

🌍 Sobre o Projeto

Mange's Bros é uma aplicação web educacional desenvolvida em React que utiliza conceitos de gamificação para transformar o processo de aprendizagem em uma experiência interativa.

Inspirado nos clássicos jogos de plataforma, o jogador percorre um mapa de fases, responde perguntas relacionadas aos conteúdos estudados e coleta itens que serão utilizados na resolução de um desafio final.

O projeto busca unir entretenimento e educação, incentivando o aprendizado por meio de desafios progressivos, feedback imediato e recompensas visuais.

---

🔐 Login

Para iniciar a aventura, o jogador deve realizar login utilizando um e-mail válido.

Exemplo:

Email: mario@email.com

Exemplos aceitos:

luigi@email.com
peach@gmail.com
mario@gmail.com

Exemplos inválidos:

mario
mario@
@email.com
mario.com

Caso o campo esteja vazio ou o formato seja inválido, o sistema exibirá uma mensagem solicitando correção antes de liberar o acesso.

---

🎯 Objetivos

• Aplicar conceitos de desenvolvimento Frontend utilizando React.
• Desenvolver interfaces acessíveis e responsivas.
• Utilizar mecanismos de gamificação para estimular o aprendizado.
• Implementar persistência de dados utilizando Local Storage.
• Criar uma experiência lúdica baseada em progressão e conquistas.

---

🗺️ Fluxo de Jogo

[LOGIN]
   │
   ▼
[INÍCIO]
   │
   ▼
[FASE 1]
   │
   ▼
[FASE 2]
   │
   ▼
[FASE 3]
   │
   ▼
[FASE 4]
   │
   ▼
[FASE 5]
   │
   ▼
[FASE 6]
   │
   ▼
[ENIGMA FINAL]

Cada fase contém perguntas que devem ser respondidas corretamente para liberar a próxima etapa da aventura.

---

🎮 Funcionalidades

🗺️ Mapa Interativo

• Navegação visual entre fases.
• Indicação de progresso do jogador.
• Controle de desbloqueio das fases.

❓ Sistema de Quiz

• Perguntas carregadas dinamicamente.
• Feedback imediato de acerto ou erro.
• Avanço condicionado ao desempenho do jogador.

🎒 Inventário

• Armazenamento dos itens conquistados.
• Reorganização dos itens por interação do usuário.
• Utilização dos itens no desafio final.

💾 Persistência de Dados

• Salvamento automático utilizando Local Storage.
• Recuperação do progresso após recarregar a página.

📱 Responsividade

• Interface adaptada para diferentes resoluções.
• Suporte para dispositivos móveis em orientação horizontal.

♿ Acessibilidade

• Navegação por teclado.
• Uso de atributos ARIA.
• Indicadores visuais de foco.
• Compatibilidade com leitores de tela.

---

🛠️ Tecnologias Utilizadas

Tecnologia	Finalidade
React.js	Construção da interface
JavaScript	Regras de negócio
CSS3	Estilização e animações
HTML5	Estrutura semântica
Local Storage	Persistência
ARIA	Acessibilidade

---

▶️ Como Rodar o Projeto

Pré-requisitos

Instale:

• Node.js 18 ou superior
• npm

Verifique:

node -v
npm -v

---

1. Clonar o projeto

git clone https://github.com/seu-usuario/manges-bros.git

---

2. Entrar na pasta

cd manges-bros

---

3. Instalar dependências

npm install

---

4. Executar o ambiente

npm run dev

---

5. Abrir no navegador

http://localhost:5173

---

📁 Estrutura do Projeto

src/
│
├── assets/
│
├── components/
│   ├── Inventario/
│   ├── Modal/
│   └── Quiz/
│
├── pages/
│   ├── TelaHome/
│   ├── TelaTutorial/
│   ├── TelaLogin/
│   └── TelaEnigmaFinal/
│
├── banco_perguntas/
│
├── App.jsx
└── main.jsx

---

♿ Recursos de Acessibilidade

Recurso	Implementação
Navegação por teclado	Tab, Enter e Espaço
Indicadores de foco	Destaque visual
ARIA Labels	Identificação
HTML Semântico	Compatibilidade
Leitores de Tela	Suporte básico

---

🚀 Melhorias Futuras

• Sistema de sons e efeitos.
• Tela de ranking.
• Novas categorias de perguntas.
• Sistema de pontuação.
• Conquistas e medalhas.
• Transições animadas entre telas.
• Personagens com diálogos.

---

🔧 Reset de Desenvolvimento

localStorage.clear();
location.reload();

---

👨‍💻 Desenvolvimento

Projeto desenvolvido como atividade avaliativa da disciplina Programação Web Frontend do curso Técnico em Desenvolvimento de Sistemas do SENAI Roberto Mange.

---

🍄 "O conhecimento é o verdadeiro power-up."