PipeDream — Dev com IA

Reimplementação do clássico PipeDream (Lucasfilm Games, 1989) como aplicação web autocontida em HTML/CSS/JS puro.

Este projeto é um exemplo didático do curso Dev com IA, demonstrando o fluxo completo de desenvolvimento assistido por IA:

Conversa (claude.ai) → Especificação técnica → Implementação (Claude Code)

Como jogar

Abra o arquivo index.html diretamente no navegador. Sem servidor, sem dependências, sem npm.

Objetivo: posicione peças de cano no grid antes que o fluxo de líquido comece a correr. Construa um caminho contínuo longo o suficiente para completar o nível.

Ação	Efeito
Clique em célula vazia	Coloca a peça ativa (base da fila)
Clique em peça própria (antes do fluxo)	Substitui a peça
Clique em peça fixa dourada	Gira 90° no sentido horário
Clique em peça fixa cinza (cadeado)	Ignorado — orientação imutável

Vitória: preencher o número mínimo de células indicado no HUD, passando por todas as peças fixas obrigatórias do nível.

Estrutura do repositório

pipedream/
├── index.html              # Jogo completo — CSS e JS inline, zero dependências
└── docs/
    ├── pipedream-spec-v2.md        # Especificação técnica gerada via claude.ai
    ├── pipedream-mockup.html       # Mockup visual de referência
    └── plano de implementação.md   # Plano de implementação gerado pelo Claude Code

Como este projeto foi construído

Este é o ponto central do exemplo didático. O jogo foi construído em três etapas, cada uma usando IA de forma diferente:

1. Conversa exploratória (claude.ai)

Uma conversa livre com o Claude para explorar a ideia, definir escopo e levantar requisitos. O resultado dessa conversa foi exportado como especificação técnica (docs/pipedream-spec-v2.md), cobrindo:

• Stack técnica (HTML5 Canvas, CSS, JS vanilla)
• Sistema de sprites e animações
• Catálogo de peças e mecânicas de jogo
• Formato JSON dos níveis
• Arquitetura de módulos sugerida

Vídeo de referência: https://www.youtube.com/watch?v=vP3VrHHmVo4

2. Planejamento (Claude Code — modo plan)

Com a spec em mãos, o Claude Code elaborou o docs/plano de implementação.md, detalhando:

• Decisões de projeto (ex: sprites gerados em canvas off-screen em vez de PNG externo)
• Ordem de implementação dos 8 módulos
• 5 níveis com dificuldade progressiva
• Paleta de cores e estrutura HTML esperada

3. Implementação (Claude Code)

O Claude Code implementou o index.html completo seguindo a spec e o plano — canvas, sprites, física do fluxo, fila de peças com animação CSS, HUD, sistema de vidas e pontuação.

Stack técnica

Camada	Tecnologia
Renderização	HTML5 Canvas API
Interface	CSS3 (fila de peças, HUD)
Lógica	JavaScript ES6+ vanilla
Animação	requestAnimationFrame
Entrega	Arquivo index.html único, autocontido

Módulos internos

Módulo	Responsabilidade
SpriteSheet	Gera sprites via canvas off-screen na inicialização
LevelLoader	Carrega JSON do nível, redimensiona canvas, posiciona peças fixas
Renderer	Loop rAF — redesenha canvas completo a cada frame
QueueManager	Mantém fila de 5 peças com animação CSS de queda
InputHandler	Mapeia clique (x, y) → (col, row), delega ao GameState
FlowEngine	Avança fluxo tick a tick com frames de sprite
GameState	Estado global: grid, fila, pontuação, vidas, fase

Níveis

#	Nome	Grid	Mínimo	Peças fixas
1	Tutorial	7×7	8 células	Nenhuma
2	Primeira Curva	7×7	10 células	Reservatório + curva girável
3	Labirinto	8×8	14 células	Curvas múltiplas + cruzamento travado
4	Cruzamentos	9×9	18 células	Cruzamento + reservatório
5	Desafio Final	9×9	22 células	Mix de peças fixas

---

Projeto gerado via conversa com Claude (claude.ai) + Claude Code · curso Dev com IA