Transforme seu jogo HTML do ChatGPT, Gemini ou Claude em um app Android

Você pediu um jogo a um chatbot de IA, ele te deu uma página de código, e agora tem uma cobrinha, um jogo de plataforma ou um jogo de nave rodando no seu navegador. Legal. A próxima pergunta é sempre a mesma: posso colocar isso no meu celular como um app de verdade, com ícone, que meus amigos possam instalar?

Sim. Este guia mostra como fazer a IA escrever um jogo que funcione bem no celular, como corrigir os problemas mais comuns e como transformá-lo em um APK com o Free HTML to APK.

Etapa 1: peça um único arquivo completo

O jogo mais fácil de converter é um único index.html com o CSS e o JavaScript dentro dele. Sem arquivos separados para perder, sem links para uma biblioteca de jogos na internet que falham quando você está offline. Se a IA dividir o código em três arquivos, peça para juntá-los.

Aqui está um prompt que você pode colar no ChatGPT, Gemini ou Claude. Troque a última parte pela sua própria ideia:

Make a mobile HTML5 game as ONE index.html file with all CSS and
JavaScript inline. No external scripts, fonts or images; draw
everything with canvas or use emoji.

Rules for phones:
- Add a viewport meta tag with width=device-width, initial-scale=1,
  user-scalable=no.
- The canvas fills the whole screen and resizes when the screen
  size or rotation changes.
- Touch controls only: tap, swipe or on-screen buttons at least
  48 pixels big. No keyboard needed.
- Stop page scrolling and zooming while playing.
- Start on a title screen with a big Play button. Start sounds
  only after that first tap.
- Save the high score in localStorage and show it on the title
  screen.
- Pause when the app goes to the background.

My game: a landscape space shooter. Drag a finger to move the
ship, it fires on its own, enemies come in waves, and it gets
faster every wave.

Etapa 2: corrija os controles de toque

Muitos jogos feitos por IA são escritos primeiro para teclado. No celular, as setas simplesmente não existem. Se o seu jogo só reage a keydown, diga à IA: "Adicione controles de toque: deslize para mudar de direção" ou "Adicione botões na tela de esquerda, direita e pular nos cantos inferiores."

Outros dois problemas de toque aparecem muito:

• A página rola ou dá zoom quando você arrasta. Peça à IA para adicionar touch-action: none ao canvas e chamar preventDefault nos manipuladores de toque.
• Os botões são pequenos demais. Peça áreas de toque de pelo menos 48 pixels e espaço entre elas. Polegares são grandes.

Etapa 3: ajuste à tela

Um jogo de 800 por 600 pixels no notebook vai ficar cortado ou minúsculo no celular. Confira se o arquivo tem uma tag viewport como esta:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Depois peça à IA para ajustar o canvas ao tamanho da janela e redesenhar ao redimensionar. Um bom truque é manter um tamanho fixo de "mundo do jogo" e escalá-lo para caber na tela, assim o jogo funciona igual em todo celular.

Decida cedo se o seu jogo é em retrato ou paisagem. Jogos de corrida e de tiro costumam ficar melhores em paisagem; jogos de quebra-cabeça e de toque geralmente combinam com retrato. Você vai travar isso no app depois, então a IA não precisa lidar perfeitamente com as duas.

Etapa 4: o som precisa de um primeiro toque

Se o seu jogo está sem som no celular, nada está quebrado. Os navegadores, e o motor de navegador dentro de um app, bloqueiam o som até o jogador tocar na tela uma vez. É por isso que o prompt acima pede uma tela de título com um botão Jogar: o toque em Jogar libera o áudio. Se a IA usou a Web Audio API, peça para ela criar ou retomar o contexto de áudio dentro desse primeiro toque.

Etapa 5: salve os recordes com localStorage

Ninguém quer que seu melhor placar desapareça ao fechar o app. O localStorage guarda pequenos dados no celular entre uma abertura e outra, e funciona dentro do app do mesmo jeito que no navegador. O código é curto:

var best = Number(localStorage.getItem("best") || 0);
if (score > best) {
  best = score;
  localStorage.setItem("best", best);
}

Você também pode salvar configurações como "som ligado ou desligado" do mesmo jeito. Mantenha pouca coisa: placares, fases desbloqueadas, algumas opções.

Etapa 6: teste primeiro no navegador do celular

Antes de compilar qualquer coisa, salve o arquivo e abra-o no navegador do seu celular. Jogue uma rodada inteira. Confira se dá para começar, controlar, perder, recomeçar e ver o recorde. Corrigir problemas aqui é mais rápido do que recompilar o app várias vezes.

Etapa 7: compile o APK

Você tem duas formas grátis de compilar.

No site

Abra o conversor online, envie seu index.html (ou um ZIP, se o seu jogo tiver arquivos de imagem e som) e siga as etapas. Não há conta nem marca d'água, e você recebe um APK assinado mais um AAB para o Google Play. A página Jogo HTML5 para APK tem mais dicas para jogos feitos com engines como Phaser ou Construct.

No seu celular

O app Android "HTML to APK: Website to App" compila direto no celular. Cole seu código, escolha um nome e um ícone e toque em Build. O construtor mostra um anúncio curto antes de cada build, e o upgrade único Remover anúncios desativa esses anúncios. Seu jogo nunca recebe nossos anúncios.

Quer sair na frente em vez de começar do zero? Os templates incluem pequenos jogos que você pode abrir no editor online, alterar ou entregar à IA como ponto de partida.

Etapa 8: tela cheia e orientação

Estas duas configurações fazem a maior diferença em um jogo:

• Tela cheia esconde a barra de status e a barra de navegação, para que o jogo use a tela inteira.
• Orientação trava o jogo em retrato ou paisagem, para que ele não gire quando o jogador inclinar o celular no meio da fase.

Você encontra os dois na etapa de cores e exibição. Aproveite para escolher uma cor de fundo que combine com o seu jogo, para não haver um clarão branco na abertura.

Etapa 9: instale e teste jogando

Envie o APK para o seu celular, toque nele e permita Instalar apps desconhecidos para o app que você usou para abri-lo quando o Android pedir. Depois jogue de verdade:

• Jogue três ou quatro rodadas e confira se o recorde continua lá depois de fechar e abrir o app de novo.
• Aperte o botão de início no meio do jogo e volte. Ele pausa?
• Teste no celular de um amigo com outro tamanho de tela.
• Confira se o som começa depois do primeiro toque.

Achou um bug? Descreva-o para a IA em uma ou duas frases simples, por exemplo "a nave sai pela borda direita da tela em paisagem", cole o código novo e compile de novo.

Compartilhar e publicar

O APK é perfeito para enviar aos amigos. Se você quer seu jogo no Google Play, envie o AAB e siga o guia de publicação no Google Play. Um jogo pequeno e caprichado, com bons controles de toque, é um ótimo primeiro app, e você o fez sem escrever o código você mesmo.