BennyKok/omg.dev

Construa um jogo para celular a partir do kit

O template web-game é um jogo completo (Coin Dash) em Vite + React + TypeScript. Seu trabalho é substituir suas regras, visão, texto e arte pelo jogo do usuário. Prioridade mobile: um telefone em modo retrato de 390 x 844, usado com um polegar. Desktop também deve funcionar.

Regras fixas

1. Inicie a pré-visualização ao vivo antes de qualquer outra coisa (passo 1 da ordem de construção). Depois escreva código: planeje em no máximo 10 linhas, então edite. Um arquivo ou uma funcionalidade por vez, depois bun run typecheck.
2. Nunca reconstrua o que o kit já possui (lista abaixo). Não adicione motor de jogo, biblioteca de UI ou @react-three/fiber.
3. Regras do jogo são funções puras em src/games/<game>/logic.ts: sem React, DOM, desenho, Date.now() ou Math.random(). Use seeded(seed). A mesma semente deve produzir o mesmo jogo: as rodadas diária e de desafio dependem disso.
4. Sem servidor, sem login. O progresso fica em localStorage (o kit faz isso).
5. Toda afirmação no texto deve corresponder ao que o jogo faz.
6. Verificado significa visto funcionando: bun run check:play passou e você olhou seus screenshots no tamanho de celular. Um HTTP 200 do link ao vivo não é um teste. check:play é headless e não precisa de desktop ou janela do navegador.

O que o kit já faz (não reconstruir)

• Loop de passo fixo, entrada de teclado e toque (arrastar em qualquer lugar, joystick, direcional, volante, botões de ação, multi-toque, dois jogadores, arrasto do mouse no computador), câmera, colisão, pausa ao esconder aba.
• Uma UI de jogo para 2D e 3D em src/ui/: menu, faixa HUD (ícone de pontuação, corações, temporizador, pausa), pausa, resultados, desbloqueios, Como jogar e FAQ, Gire o telefone, toasts, roteador, perfil salvo.
• Temas em src/ui/theme.ts: softCandy (padrão), glassNeon, cleanMinimal. ?theme=glassNeon pré-visualiza outro.
• Melhor pontuação e desbloqueios; desafio diário (semente da data, número a partir do dia de lançamento, sequência); links de desafio ?c=<seed>&s=<score>&n=<name> com parâmetros limpos e "Você venceu / Você perdeu" mais "Enviar de volta"; compartilhar com navigator.share ou cópia para área de transferência; som Web Audio após o primeiro toque com mudo lembrado; vibração que falha silenciosamente.
• track(name, data) com game_open, game_start, game_over, play_engaged (45 s), share, challenge_open, daily_complete. Ele registra no console e envia para análise omg em uma página publicada. useRun em play.tsx os envia; não os envie novamente.
• 100dvh, áreas seguras, sem rolagem ou zoom, alvos de toque de 48 px, movimento reduzido.
• SEO construído a partir de src/app/about.ts: título, descrição, Open Graph, imagem de compartilhamento, dados VideoGame e FAQPage. O manifesto de instalação vem do plugin omg Vite com public/icons/.

Escolha 2D ou 3D

2D por padrão (cerca de 100 KB gzip de script). 3D apenas quando a ideia precisar de profundidade; adiciona three.js (cerca de 137 KB gzip), carregado enquanto o menu é mostrado e nunca em uma build 2D. Alterne com a ÚNICA linha em src/app/view.ts, depois exclua o arquivo de visão não utilizado.

Escolha o controle

Defina uma vez em src/app/about.ts, GAME.controls: kind, touchHint (menu no celular) e keysHint (menu no computador). play.tsx passa GAME.controls.kind para <TouchControls>. As duas dicas e howToPlay devem descrever esse mesmo controle. Nunca escreva "arraste" para um jogo com botões, ou "toque nas setas" para um jogo de arrasto. check:ui e check:play falham se uma dica nomear outro controle.

Jogo	kind	O jogador faz	As regras leem
Paddle, pegar, corredor, desviar de pista, estilingue	drag	arrasta em qualquer lugar do campo	axisX/axisY; com mode="absolute", dragTarget para que a pá fique sob o dedo
Top-down, movimento livre, twin-stick	stick	usa o joystick com o polegar, canto inferior esquerdo	axisX/axisY
Movimentos em grade: labirinto, cobrinha, sokoban	dpad	toca nas quatro setas	axisX/axisY ou wasTapped
Corrida, mudança de pista com duas teclas	steer	segura esquerda ou direita	axisX
Um toque: flappy, pulo, tempo	buttons	toca no botão de ação	wasTapped(input, "p1", "a")

Adicione botões de ação com buttons={[...]} em qualquer tipo. axes="x" limita um arrasto a esquerda e direita. O teclado sempre funciona: setas ou WASD, Espaço.

Ordem de construção

1. Pré-visualização primeiro, antes de editar qualquer arquivo: no diretório do projeto execute bun install se node_modules estiver faltando. Inicie bun run dev em segundo plano (porta 5174). Chame omg_expose_port com a porta 5174, sem expoGo. Diga ao usuário: "A pré-visualização está pronta no card abaixo. Ela atualiza enquanto construo." Vite recarrega a pré-visualização a cada salvamento daqui em diante. Quando as etapas de primeira execução já fizeram isso, ou a porta 5174 já está em uso pelo servidor de desenvolvimento deste projeto, vá para o passo 2.
2. Planeje: loop principal em uma linha, tipo de controle (tabela acima), vitória, derrota, pontuação e como uma rodada termina (um cronômetro, vidas ou itens caindo). Coloque em README.md.
3. Regras: copie coin-dash/logic.ts para src/games/<game>/logic.ts. Mantenha createGame(players, seed), stepGame(game, input, dt), finalScore, events (para som), UNLOCKS, shareLine. Leia entrada com axisX/axisY/wasTapped.
4. Visão: copie view-2d.ts (canvas: drawWorld, drawShadow, loadImage) ou view-3d.ts (three.js: createStage, chaseCamera, billboard, checkerTexture; geometria compartilhada, materiais Lambert, sombras blob, sem shadow maps). Desenhe a imagem do slot de arte quando definida, uma forma de espaço reservado quando não.
5. Conexão: em src/app/play.tsx altere as importações, os números HUD, FEEDBACK (som por evento), os botões e a linha run.finish({...}). Mantenha <TouchControls kind={GAME.controls.kind}>, <HudScore icon={ART.scoreIcon}>, run.step e run.finish.
6. Palavras: preencha src/app/about.ts (nome, título com palavras de busca, descrição, tagline, controles, dia de lançamento, orientação, como jogar em 3 a 5 passos, dicas, 4 a 6 FAQ).
7. Arte (obrigatório): o kit vem com arte de exemplo do Coin Dash, e ela não deve chegar ao jogo do usuário. Escolha o preset em theme.ts, ou espalhe um e defina as cores do cliente. Faça imagens com omg_generate_image em um estilo (uma folha, cortada em PNGs transparentes, o jogo abaixo de 3 MB) e substitua cada item:
   • ART.hero (a arte do menu sob o logotipo) e ART.scoreIcon (o ícone de pontuação HUD) em src/app/art.ts. Delete public/art/hero.svg e public/art/score.svg.
   • ART.items (um por desbloqueio) e ART.sprites.
   • public/icons/ (pwa-192x192.png, pwa-512x512.png, pwa-512x512-maskable.png, apple-touch-icon.png em 180) e public/og.png (1200 x 630). Depois olhe os screenshots do menu, jogo e resultados: nenhum corredor vermelho, nenhuma moeda, nenhum ícone de moeda a menos que o jogo seja sobre moedas.
8. Verifique: bun run typecheck, bun test, bun run check:ui, depois bun run check:play. check:play joga uma rodada em 390 x 844 com toque: menu, Jogar, seu controle, pausa, retomar, resultados, erros no console, arte de exemplo. Abra cada PNG em .omg/ui-check/ e .omg/play-check/. Corrija cada FAIL e WARN, então execute-os novamente. Não publique até que check:play passe.
9. Publique: omg_deploy. A primeira publicação precisa de public/omg-store/1.png a 3.png (menu, jogo, resultados em 390 x 844). Aguarde um minuto, então execute bun run check:play -- --url <link ao vivo> e olhe seus screenshots. Relate apenas o que passou lá.

Edite src/ui/, src/game/ e src/render/ apenas quando um bug do kit o bloquear. Adicione ajudantes em sua pasta de jogo.

Regras de celular

• Mantenha a tag viewport, styles.css, page.ts. Coloque itens HUD dentro de <Hud>. Controles importantes ficam na metade inferior.
• Sem setInterval, setTimeout ou Date.now() para tempo do jogo: conte dt.
• Sem alert, confirm, prompt, fontes externas ou scripts.
• 3D: no máximo algumas centenas de malhas, reutilize geometria e materiais, sem pós-processamento, sem texturas grandes.
• Em celulares, a barra de instalação omg fica abaixo do jogo, e o jogo se torna um card acima dela. Não a esconda nem a mova.

Relatório final

1. Link ao vivo. 2. O jogo em uma frase. 3. O que foi testado e em quais tamanhos, com o resultado de check:play no link ao vivo. 4. Screenshots do menu, jogo e resultados. 5. Problemas conhecidos ou próximas ideias (no máximo 5). Diga se o 3D foi verificado em um celular real.

Lições já aprendidas

• Um botão no final de uma linha que rola lateralmente saiu da tela e os jogadores ficaram presos. check:ui falha esse botão; mantenha botões chave na tela a 360 px.
• "Verificado" foi afirmado logo após um deploy enquanto o site ao vivo ainda servia a build antiga. Re-verifique após uma curta espera.
• Cópias de um jogo se desviaram da fonte. Construa a partir de uma pasta; nunca aplique patch em uma cópia.
• Fruit Catcher (22 Out) dizia "Arraste para a esquerda ou direita para mover a cesta" sobre um par de botões de seta; arrastar não fazia nada. Defina GAME.controls e deixe check:play dirigir.
• O mesmo jogo foi enviado com o corredor vermelho do kit, moedas, ícone de pontuação de moeda e ícone de aplicativo de moeda. O passo 7 substitui todos eles; check:play falha em qualquer arquivo de exemplo.
• O usuário não viu pré-visualização por 5 minutos porque a porta nunca foi exposta. O passo 1 vem antes de qualquer edição.
• O agente escreveu "o navegador desktop não estava rodando" e verificou o link ao vivo apenas com HTTP. check:play é headless; execute-o no link ao vivo.
• Anúncios otimizados para um novo evento personalizado (play_engaged) foram descartados. Comece anúncios com uma meta padrão, mude quando o evento disparar cerca de 50 vezes por semana.