🕹️ ARCADE.JS

Uma máquina de arcade construída com HTML, CSS e JavaScript puro (sem frameworks, sem build tools), reunindo três mini-jogos num único hub com visual de gabinete retrô: tela CRT com scanlines, marquise neon, cartuchos de seleção e painel de controle.

---

📸 Sobre o projeto

O ARCADE.JS é um hub que carrega jogos de forma modular: cada jogo é um módulo ES independente com sua própria pasta (html + css + js), exportando duas funções — init(gameArea) e destroy(). O hub (hub.js) é responsável apenas por importar o jogo escolhido dinamicamente, injetá-lo na tela do gabinete e desmontá-lo quando o jogador aperta SAIR, sem deixar listeners ou estilos "vazando" entre um jogo e outro.

🎮 Jogos

Jogo	Gênero	Controles	Destaques
Robot Run	Endless runner	Espaço / ↑ pula	Sprites animadas (correr, pular, morrer), obstáculos infinitos, pontuação por tempo sobrevivido
Snake	Clássico	↑ ↓ ← →	Grid dinâmico, comida com cor aleatória, tela de reinício
Space Invaders	Shooter	← → / A D move, Espaço atira	Ondas de invasores, tiros inimigos, vidas, fases progressivas (cada fase é mais rápida que a anterior)

Todos os três seguem o mesmo padrão de tela: tela de início → jogo → tela de game over com opção de jogar novamente.

🗂️ Estrutura do projeto

GameHub/
├── hub.html              # estrutura do gabinete arcade
├── hub.css               # identidade visual (CRT, marquise, cartuchos, painel)
├── hub.js                # importa e alterna os jogos dinamicamente
│
├── robotBoy/
│   ├── robotBoy.html
│   ├── robotBoy.css
│   ├── robotBoy.js        # init(gameArea) / destroy()
│   └── assets/             # sprites (Idle, Run, Jump, Dead...)
│
├── snakeGame/
│   ├── snakeGame.html
│   ├── snakeGame.css
│   ├── snakeGame.js        # init(gameArea) / destroy()
│   └── assets/              # som de "comer"
│
└── SpaceInvaders/
    └── src/
        ├── spaceInvaders.html
        ├── spaceInvaders.css
        ├── spaceInvaders.js  # init(gameArea) / destroy()
        ├── classes/
        │   ├── Player.js
        │   ├── Invader.js
        │   └── Projectile.js
        ├── utils/
        │   └── constantes.js
        └── assets/
            ├── images/
            └── audios/

🧩 Como funciona a modularização

Cada jogo exporta um objeto padrão com duas funções:

export default {
    init,     // recebe o elemento onde o jogo deve ser montado
    destroy,  // desmonta o jogo: remove listeners, estilos e limpa a tela
}

O hub decide qual jogo carregar e faz o import() dinâmico só quando o jogador escolhe um cartucho:

const games = {
    robotBoy: () => import('./robotBoy/robotBoy.js'),
    snakeGame: () => import('./snakeGame/snakeGame.js'),
    spaceInvaders: () => import('./SpaceInvaders/src/spaceInvaders.js'),
}

const module = await games[nomeDoJogo]()
currentGame = module.default
currentGame.init(gameArea)

// ao sair:
currentGame.destroy()

Isso deixa o hub agnóstico em relação aos jogos — pra adicionar um jogo novo, basta criar a pasta seguindo o mesmo contrato (init/destroy) e registrar uma entrada em games no hub.js.

▶️ Como rodar localmente

Como os jogos usam fetch() para carregar HTML/CSS e import de módulos ES, o navegador exige que o projeto seja servido por http://, e não aberto direto como arquivo (file://).

Opção 1 — Python:

cd GameHub
python3 -m http.server 8000

Depois acesse http://localhost:8000/hub.html.

Opção 2 — Node:

npx serve GameHub

Opção 3 — VS Code: Extensão Live Server, clique com o botão direito em hub.html → "Open with Live Server".

⚠️ A fonte pixelada ("Press Start 2P") é carregada via Google Fonts na primeira execução — depois fica em cache do navegador.

🛠️ Tecnologias

• HTML5 / CSS3 (sem pré-processadores)
• JavaScript (ES Modules, sem frameworks nem bundlers)
• Canvas 2D API (Snake e Space Invaders)
• CSS Animations + sprite-swapping via JS (Robot Run)

📄 Licença

Projeto pessoal para fins de estudo e portfólio.