https://github.com/0nf1rey/jogo-natalino
Este projeto refere-se ao desenvolvimento de um jogo interativo com temática natalina, criado em 2024, com o propósito de refletir a essência e a atmosfera do Natal.
https://github.com/0nf1rey/jogo-natalino
christmas game web
Last synced: 10 months ago
JSON representation
Este projeto refere-se ao desenvolvimento de um jogo interativo com temática natalina, criado em 2024, com o propósito de refletir a essência e a atmosfera do Natal.
- Host: GitHub
- URL: https://github.com/0nf1rey/jogo-natalino
- Owner: 0nF1REy
- License: mit
- Created: 2024-12-25T01:58:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-23T03:09:56.000Z (11 months ago)
- Last Synced: 2025-08-24T06:37:00.899Z (11 months ago)
- Topics: christmas, game, web
- Language: CSS
- Homepage: https://0nf1rey.github.io/jogo-natalino/
- Size: 817 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Jogo Natalino
## 📖 Descrição
Um jogo temático de Natal interativo onde você monta uma imagem natalina clicando em diferentes partes de forma sequencial. O objetivo é revelar uma bela cena natalina através de 5 peças que devem ser descobertas!
## 🎮 Como Jogar
1. **Objetivo**: Clique em cada uma das 5 partes da imagem para revelar a cena natalina completa
2. **Mecânica**: Cada parte clicada fica permanentemente revelada (não pode ser desmarcada)
3. **Reset**: Use o botão "Resetar" para começar uma nova partida
4. **Atmosfera**: Aproveite os flocos de neve animados e a mensagem de "Feliz Natal" que aparecem na tela!
## ✨ Funcionalidades
### 🎯 Gameplay
- **5 partes interativas** que formam uma imagem natalina completa
- **Sistema de checkpoint**: Uma vez clicada, a parte permanece revelada
- **Botão de reset** para recomeçar o jogo
- **Interface responsiva** que se adapta a diferentes tamanhos de tela
### 🎨 Efeitos Visuais
- **Animação de neve**: Flocos de neve caindo continuamente pela tela
- **Plano de fundo temático**: Imagem de fundo com tema natalino
- **Gradiente animado**: Cores natalinas (vermelho e verde) com efeito de brilho
- **Mensagem de boas-vindas**: Pop-up animado com "Feliz Natal"
### 📱 Design Responsivo
- **Mobile-first**: Otimizado para dispositivos móveis
- **Breakpoints adaptativos**: Diferentes layouts para telas de 480px, 560px e 700px+
- **Favicons e ícones**: Suporte completo para diferentes dispositivos Apple e Android
## 🗂️ Estrutura do Projeto
```
jogo-natalino/
├── index.html # Página principal
├── scripts/
│ └── app.js # Lógica do jogo e efeitos
├── styles/
│ ├── styles.css # Estilos principais
│ ├── media.css # Media queries responsivas
│ └── fonts.css # Configurações de fontes
└── assets/
├── img/
│ ├── background-snow.webp # Plano de fundo
│ ├── natal-1.png # Imagem de fundo decorativa
│ ├── parte-1.png # Primeira parte da imagem
│ ├── parte-2.png # Segunda parte da imagem
│ ├── parte-3.png # Terceira parte da imagem
│ ├── parte-4.png # Quarta parte da imagem
│ └── parte-5.png # Quinta parte da imagem
├── favicons/ # Favicons para navegadores
└── icons/ # Ícones para dispositivos móveis
```
## 🎨 Paleta de Cores
O jogo utiliza uma paleta de cores natalinas:
- **🟠 Laranja**: `#F5624D` - Acentos e destaques
- **🔴 Vermelho**: `#CC231E` - Cor primária natalina
- **🟢 Verde Claro**: `#34A65F` - Verde natalino principal
- **🟢 Verde Escuro**: `#0F8A5F` - Verde para sombras
- **🔵 Azul**: `#235E6F` - Cor complementar
## 🚀 Tecnologias Utilizadas
- **HTML5**: Estrutura semântica e acessível
- **CSS3**:
- Flexbox para layout
- CSS Custom Properties (variáveis)
- Animações e transições
- Media queries responsivas
- **JavaScript**:
- Manipulação do DOM
- Eventos de interação
- Animações dinâmicas
- Timers e intervalos
## 🌟 Recursos Técnicos
### JavaScript
- **Sistema de checkboxes**: Controla as partes reveladas do jogo
- **Gerador de neve**: Cria flocos de neve animados dinamicamente
- **Sistema de notificações**: Exibe mensagem de boas-vindas animada
- **Reset automático**: Função para reiniciar o estado do jogo
### CSS
- **Animações CSS**: Efeitos de brilho, transições suaves
- **Responsividade**: Layout adaptativo para diferentes dispositivos
- **Z-index management**: Camadas organizadas para sobreposições corretas
- **Background patterns**: Imagens de fundo otimizadas
## 📱 Compatibilidade
- ✅ **Navegadores modernos** (Chrome, Firefox, Safari, Edge)
- ✅ **Dispositivos móveis** (iOS e Android)
- ✅ **Tablets** e desktops
- ✅ **Progressive Web App ready** (com ícones e favicons configurados)
## 🎄 Como Executar
1. **Clone ou baixe** o repositório
2. **Abra o arquivo** `index.html` em qualquer navegador moderno
3. **Divirta-se** jogando e descobrindo a imagem natalina!
> **Nota**: O jogo funciona completamente offline - não requer servidor ou conexão com internet.
## 👤 Sobre o Desenvolvedor
Alan Ryan
☕ Peopleware | Tech Enthusiast | Code Slinger ☕
Apaixonado por código limpo, arquitetura escalável e experiências digitais envolventes
Conecte-se comigo:
---
## 📫 Contribuir
Contribuições são muito bem-vindas! Se você deseja contribuir com o projeto, por favor, siga estes passos:
1. **Faça um Fork** do repositório.
2. **Crie uma nova Branch** para sua feature ou correção:
```bash
git checkout -b feature/nome-da-feature
```
3. **Faça suas alterações** e realize o commit:
```bash
git commit -m "feat: Adiciona nova feature"
```
4. **Envie suas alterações** para o seu fork:
```bash
git push origin feature/nome-da-feature
```
5. **Abra um pull request** para a branch `main` do repositório original.
## 📚 Recursos Adicionais
- **📝 Como criar um Pull Request**
- **💾 Padrão de Commits Convencionais**
## 📜 Licença
Este projeto está sob a **licença MIT**. Consulte o arquivo **[LICENSE](LICENSE)** para obter mais detalhes.
> ℹ️ **Aviso de Licença:** © 2025 Alan Ryan da Silva Domingues. Este projeto está licenciado sob os termos da licença MIT. Isso significa que você pode usá-lo, copiá-lo, modificá-lo e distribuí-lo com liberdade, desde que mantenha os avisos de copyright.
⭐ Se este repositório foi útil para você, considere dar uma estrela!
---
**🎅 Feliz Natal e bom jogo! ❄️**