Aliens e Dinossauro: Uma Invasao Muito Maluca

Site oficial do projeto de Game Jam, desenvolvido em 2 dias, com foco em apresentar o universo do jogo, o conceito da equipe e uma demo jogavel no navegador.

Visao Geral

Aliens e Dinossauro e um projeto de game jam com proposta direta: entrar no site, entender o mundo do jogo em poucos segundos e jogar a demo sem instalar nada.

O site foi pensado para ser rapido, visual e divertido, acompanhando o tom humoristico da experiencia co-op.

O que voce encontra no site

• Landing narrativa com cards de temática, plot e mecânicas.
• Página da Demonstração com o jogo carregado via iframe em proporção 16:9.
• Interações visuais com componentes como ClickSpark e Magnet.
• Seção da equipe com reveal animado por IntersectionObserver.

Sobre o Projeto

Este repositório contem o frontend do site da jam, com duas experiencias principais:

1. Home Page com identidade visual do jogo, cards de lore/mecanicas e apresentacao da equipe.
2. Página de Demonstração com o jogo embarcado via iframe em public/game/index.html.

O jogo mistura humor e aventura em um co-op de dois personagens:

• Um dinossauro com jetpack e ataque.
• Um alien com dash e espada.

Tudo isso em uma ambientação de base lunar tomada por uma dupla improvável.

Destaques Tecnicos

• SPA com React 19 e React Router 7.
• Build e ambiente dev com Vite 7.
• Estilizacao com SCSS.
• Efeitos de interação no frontend (ex.: ClickSpark, Magnet, reveal por IntersectionObserver).
• Demo jogavel servida localmente em public/game.

Stack

• react + react-dom (React 19)
• react-router-dom (rotas da SPA)
• vite + @vitejs/plugin-react-swc
• sass (SCSS)
• eslint (qualidade de codigo)

Estrutura Rapida

src/
	pages/
		home-page/      # Landing com narrativa e equipe
		game-demo/      # Pagina com iframe da demo
	components/       # Layout, navbar e componentes de efeito/UI
	styles/           # Paleta, variaveis, fontes e estilos globais
public/
	game/             # Build/export do jogo jogavel

Como Rodar Localmente

Requisitos

• Node.js 18+
• pnpm (recomendado, pois o projeto ja possui pnpm-lock.yaml)

Instalacao

pnpm install

Ambiente de desenvolvimento

pnpm dev

Build de producao

pnpm build

Preview da build

pnpm preview

Scripts Disponiveis

• pnpm dev: inicia o servidor de desenvolvimento.
• pnpm build: gera build de producao.
• pnpm preview: sobe uma previa da build.
• pnpm lint: executa o ESLint.
• pnpm deploy: comando de deploy via plugin configurado no projeto.

Time e Producao

Projeto realizado em colaboracao multidisciplinar na janela de 48h de Game Jam, envolvendo:

• Programação e level design
• Arte e animações
• Trilha sonora
• Efeitos visuais
• Desenvolvimento web e apresentacao do projeto

Time

Projeto realizado em formato de Game Jam com colaboracao multidisciplinar:

• Programação
• Arte e animações
• Trilha sonora
• Efeitos visuais
• Desenvolvimento do site

Contexto da Jam

Este projeto foi pensado para equilibrar:

• Velocidade de entrega (janela curta de 48h)
• Identidade visual forte
• Experiencia web direta para jogar e conhecer o time em poucos cliques