Super Neon
A revista de games estilo anos 90 que vem com jogo: cada edição tem capa, análises com notas, códigos secretos, detonado, cartas dos leitores, classificados e um CD-ROM com jogos completos que rodam no navegador.
Tudo é HTML, CSS e JavaScript puro, sem build e sem dependências, publicado no GitHub Pages.
Ler e jogar: https://yurineves92.github.io/games/
Edições
| Nº | Capa | Jogos no CD-ROM |
|---|
| 1 | Quadrix | Quadrix, Snake, Fruit Ninja, Flappy Bird |
| 2 | Invasores | Invasores, Paredão, Pong |
| 3 | Come-Come | Come-Come, Travessia, Campo Minado |
| 4 (especial) | Turbo Neon | Turbo Neon, Super Pixel |
Códigos secretos
Cada jogo tem códigos (listados na seção Dicas & Macetes de cada edição). Para usar, digite o código na caixa CÓDIGO SECRETO do menu do jogo. O código KONAMI também vale pela sequência ↑ ↑ ↓ ↓ ← → ← → B A no teclado, com o menu aberto. Com código ligado, o recorde não é salvo e o placar não vai para o ranking.
Hall da Fama (ranking global com Firebase)
O ranking usa o Firestore no plano gratuito (Spark). Enquanto ele não estiver configurado, os jogos funcionam normalmente com o recorde salvo no navegador.
A configuração do Firebase não fica no repositório. Ela é guardada nos secrets do GitHub, e o workflow pages.yml escreve o shared/firebase-config.js só na hora de publicar.
1. Criar o projeto e o banco
- Em https://console.firebase.google.com, clique em Criar um projeto. Pode desligar o Google Analytics.
- Abra Criação → Firestore Database → Criar banco de dados, escolha o local
southamerica-east1 (São Paulo) e o modo de produção.
- Na aba Regras do Firestore, cole o conteúdo de
firestore.rules e clique em Publicar.
- Em ⚙ Configurações do projeto → Geral → Seus apps, clique em Web
</> e registre o app (sem Firebase Hosting). Deixe aberta a tela com o firebaseConfig.
2. Guardar a configuração nos secrets do GitHub
No repositório, abra Settings → Secrets and variables → Actions → New repository secret e crie os quatro secrets abaixo, copiando os valores do firebaseConfig sem as aspas:
| Secret | Valor do firebaseConfig |
|---|
FIREBASE_API_KEY | apiKey |
FIREBASE_AUTH_DOMAIN | authDomain |
FIREBASE_PROJECT_ID | projectId |
FIREBASE_APP_ID | appId |
FIREBASE_DATABASE_URL | URL do Realtime Database (contador de leitores online) |
Depois, em Actions → Publicar no GitHub Pages → Run workflow, rode a publicação de novo, ou só faça um push.
3. Trancar a chave no seu domínio (recomendado)
Num site estático, o navegador precisa receber a configuração para falar com o Firebase. Por isso ela nunca é 100% secreta no site publicado, só fica fora do código. Para que ninguém use a chave em outro site:
- Abra https://console.cloud.google.com/apis/credentials (no projeto do Firebase).
- Clique na chave Browser key (auto created by Firebase).
- Em Restrições de aplicativo, escolha Sites e adicione
https://yurineves92.github.io/*. Para testar localmente, adicione também http://localhost:*/*.
- Salve.
As regras do firestore.rules completam a proteção: elas permitem ler o ranking e criar placares novos (3 letras/números e uma pontuação inteira), mas não deixam editar nem apagar nada.
4. Contador de leitores online (Realtime Database)
A banca e as edições mostram quantas pessoas estão no site agora, e cada jogo mostra quantas estão jogando. Isso usa o Realtime Database do mesmo projeto:
- No console do Firebase, abra Criação → Realtime Database → Criar banco de dados e escolha o modo bloqueado.
- Na aba Regras, cole o conteúdo de
database.rules.json e publique. As regras deixam cada visitante criar e apagar só a própria marca de presença.
- Crie o secret
FIREBASE_DATABASE_URL com a URL do banco (algo como https://SEU-PROJETO-default-rtdb.firebaseio.com).
O plano gratuito aceita até 100 conexões simultâneas. Acima disso, o contador para de subir, mas o site continua funcionando.
Os placares ficam em ranking/{jogo-modo}/scores. O plano gratuito permite 50 mil leituras e 20 mil gravações por dia.
Estrutura
index.html banca: as 4 capas e o Hall da Fama
edicoes/NN/index.html a revista (capa, análises, dicas, detonado, cartas, classificados, CD-ROM)
edicoes/NN/arte.svg arte da capa
edicoes/NN/prints/ capturas de tela usadas nas análises
revista/revista.css visual de revista dos anos 90
revista/edicoes.js dados das capas e catálogo de jogos
revista/revista.js capas, CD-ROM estilo Windows 95, Hall da Fama, navegação
jogos/<jogo>/ cada jogo (index.html + .js)
shared/common.js sons sintetizados, canvas, joystick na tela, controle, códigos secretos
shared/ranking.js Hall da Fama (Firestore) e carregador do SDK do Firebase
shared/presenca.js leitores online e "jogando agora" (Realtime Database)
shared/firebase-config.js configuração do Firebase (gerada no deploy a partir dos secrets)
shared/style.css visual neon das telas de jogo
firestore.rules regras de segurança do ranking
database.rules.json regras do contador de leitores online
.github/workflows/pages.yml publicação no GitHub Pages
Rodar localmente
python -m http.server 8000
Depois abra http://localhost:8000.
Fan games não oficiais, sem fins lucrativos. Fruit Ninja (Halfbrick), Flappy Bird e os clássicos que inspiraram os jogos são marcas de seus respectivos donos.
