Criar um jogo com IA grátis: o Gemini desenha, o Claude constrói (sem programar)

Você pode fazer um jogo jogável com IA sem escrever uma única linha de código: o Gemini desenha as imagens, você entrega para o Claude transformar em jogo e joga no navegador. A primeira versão jogável do jogo abaixo ficou pronta em menos de 10 minutos. Algo assim antes levava algumas semanas.

Este é o jogo de que estou falando. Clique nele uma vez e jogue: o clique esquerdo atira, o direito joga uma granada. Há um botão de tela cheia na barra de cima.

A ideia: uma IA desenha, outra IA constrói

Uma IA de conversa escreve muito bem o código de um jogo pequeno, mas não consegue desenhar uma cidade em ruínas sombria, um bando de zumbis e uma torre de laser no mesmo estilo. Uma IA de imagens desenha tudo isso, mas não consegue fazer as imagens se mexerem. Por isso usei duas ferramentas e dei a cada uma o trabalho que faz melhor.

• O Gemini desenhou as imagens: o cenário, os zumbis e as armas.
• O Claude pegou essas imagens, recortou em peças separadas, montou a cena e fez as fases.

Você não fica preso a essas duas. Qualquer IA que faça imagens pode desenhar, e qualquer IA de conversa que escreva código pode construir. O ChatGPT e o Gemini também podem escrever a parte do código, e servem bem para jogos mais simples, feitos de formas e cores lisas. As imagens são o que faz um jogo parecer um jogo de verdade.

O que você precisa

• Uma IA que faça imagens. Eu usei o Gemini.
• Uma IA de conversa que escreva código. Eu usei o Claude, e o ChatGPT ou o Gemini também servem.
• O navegador Chrome. Você não precisa instalar programa nenhum.

Você pode começar de graça, mas os planos gratuitos têm limites diários de imagens e mensagens, e as regras mudam de plano para plano. Muitas ferramentas de imagem só permitem o uso comercial das imagens em plano pago, então leia o que diz o seu se pretende compartilhar ou vender o jogo. Este post é sobre como fazer um jogo rápido com IA, não é aconselhamento jurídico.

Para a hospedagem, o lugar na internet onde o jogo fica guardado para qualquer pessoa abrir, usei o meu próprio site, o mesmo em que você está lendo isto. Você pode fazer igual com o seu, e há outras opções, que explico mais abaixo.

Se você ainda não tem um site, primeiro precisa de hospedagem. Um jeito simples é a Bluehost. É uma empresa de hospedagem cujo criador de sites com IA junta a hospedagem com um site inicial, e assim você pula a página em branco, e a maioria dos planos de hospedagem deixa você enviar os seus próprios arquivos, por exemplo um único arquivo de jogo. Veja na página deles os planos e preços atuais antes de decidir, porque as ofertas mudam.

Passo 1: decida o jogo e depois peça as imagens à IA de imagens

Antes de desenhar qualquer coisa, pense no tipo de jogo que você quer. Um jogo de defesa em que você segura um muro contra inimigos, um jogo de tiro no espaço, um labirinto, um jogo de cartas? E como ele deve parecer: uma cidade sombria em ruínas, uma floresta clara, o espaço? De quais personagens você precisa: um herói, alguns inimigos, um chefe? Você não precisa decidir tudo sozinho. Peça ideias primeiro à IA, e em segundos ela te dá algumas.

Você pode começar com um pedido assim: “Quero fazer um jogo simples que rode no navegador, em um único arquivo HTML. Me dê cinco ideias de jogos fáceis de construir. Para cada uma, diga em uma frase o que o jogador faz, como seria o cenário e de quais personagens ou objetos eu precisaria de imagens.”

Escolha a ideia de que mais gostar, mude o que quiser e agora você sabe exatamente quais imagens pedir. Um jogo simples precisa de três tipos: um cenário, os inimigos e as armas. Peça cada um separadamente e peça sempre o mesmo estilo, para tudo parecer da mesma família. Este é o tipo de pedido que funciona.

Para o cenário, pedi algo parecido com isto: “Desenhe um cenário de jogo visto de cima para um jogo de defesa de base: uma estrada rachada em ruínas no alto e um muro de metal forte com um portão embaixo. Estilo pixel art escuro e sujo, imagem larga em 16:9, sem texto e sem personagens.”

Para os inimigos: “Desenhe uma folha de sprites de um ciberzumbi verde em seis poses: duas andando, uma com os braços esticados, uma atacando e mais duas. O mesmo personagem e o mesmo tamanho em todas as poses, visto de frente, com um espaço claro entre elas, sobre um fundo cinza liso. O mesmo estilo pixel art do cenário.”

E para as armas e os efeitos: “Desenhe uma torre de arma de ficção científica em seis quadros, parada e atirando, um portão de laser brilhante, uma explosão em quatro quadros e um raio de energia azul. O mesmo estilo pixel art, sobre um fundo cinza liso.”

Uma coisa que aprendi: se você pedir um “fundo transparente”, muitas ferramentas de imagem pintam dentro da imagem um falso tabuleiro cinza e branco, como se fizesse parte do desenho. Uma cor lisa funciona melhor. Depois o Claude consegue removê-la.

Passo 2: entregue as imagens à IA de conversa

Abra o Claude, anexe as imagens e descreva o jogo com palavras simples. Você não precisa saber como um jogo funciona. Diga o que quer ver e fazer, e deixe o código por conta da IA. Por exemplo:

“Aqui estão três imagens: um cenário, uma folha de sprites de zumbis e uma folha de torre. Recorte você mesmo as folhas em imagens separadas e faça um jogo de navegador em um único arquivo. Uma torre embaixo defende um muro de zumbis que chegam em 10 ondas. A torre mira com o mouse e atira com o botão esquerdo, e o direito joga uma granada. Cada zumbi dá créditos para comprar melhorias. Adicione efeitos sonoros e um chefe nas ondas 5 e 10. Faça uma tela inicial e uma tela de vitória ou fim de jogo.”

No meu caso, o Claude recortou as folhas em peças, colocou o cenário, montou a cena e escreveu as fases. Poucos minutos depois, a primeira versão já dava para jogar. Depois gastei mais tempo com os extras, que é o passo 4.

Passo 3: jogue sem salvar nada

O Claude mostra muitas respostas numa prévia ali mesmo na conversa. Se o seu código veio do ChatGPT ou do Gemini, existe um jeito ainda mais rápido: o AI Code Harvester, nossa extensão gratuita do Chrome, encontra o código na resposta, e o botão Mostrar o executa ao vivo em uma nova aba. Você não salva arquivo nenhum e não copia e cola nada.

Por isso o Harvester é um complemento poderoso para tudo que dá para rodar no navegador sem salvar arquivos: um jogo, uma ferramenta pequena, o desenho de uma página. Você pede, aperta Mostrar, olha o resultado, pede uma mudança e olha de novo. Funciona nas páginas do ChatGPT e do Gemini, e o nosso guia Como executar o código HTML do ChatGPT ou do Gemini e ver a página ao vivo explica passo a passo.

Passo 4: melhore com um pedido de cada vez

A primeira versão nunca é a final, e essa é a parte divertida. Depois da primeira versão, fui mudando o jogo com pedidos simples, um por vez. Alguns deles:

• “Mostre pequenas letras das teclas na borda da tela, com um texto curto, para o jogador saber qual tecla compra o quê.”
• “Adicione um soldado que joga granadas sozinho no zumbi mais próximo.” Para ele, dei ao Claude imagens novas feitas no Gemini.
• “Adicione uma torre automática que mira e atira sozinha, mas mais devagar que a principal.”
• “Os zumbis só devem perder energia quando eu acertar o corpo ou a cabeça, não as pernas.”
• “Adicione um botão de pausa no canto superior esquerdo e um botão de tela cheia.”
• “Deixe a última onda bem maior.”

A regra que mais economiza tempo: peça uma mudança, teste e só então peça a próxima. Se algo quebrar, diga “desfaça a última mudança”. A IA lembra o que fez e consegue consertar.

Teste no seu computador antes de colocar online

Antes de compartilhar o jogo, experimente em casa, onde ninguém vê os erros. Um jogo assim é uma página web, e o seu computador consegue abri-la sem servidor nenhum.

1. Salve o código em um único arquivo, por exemplo game.html. Se o jogo usa imagens de uma pasta, deixe a pasta ao lado do arquivo. Ou peça à IA: “Coloque as imagens dentro do arquivo, para ser um arquivo só.” Assim não há nada para perder.
2. Dê dois cliques no arquivo. Ele abre no seu navegador.
3. Clique uma vez no jogo e depois use as teclas. O navegador precisa desse primeiro clique para o jogo conseguir ouvir o teclado.
4. Confira tudo: o mouse e as teclas, o som, a tela cheia, a pausa e se dá para jogar até o fim.
5. Conserte o que estiver errado contando à IA exatamente o que você viu.

Quando funcionar, coloque online para outras pessoas jogarem. Para isso você precisa de hospedagem web, que é simplesmente um lugar na internet que guarda os seus arquivos e dá um endereço a eles. Um único arquivo de jogo funciona em quase qualquer hospedagem, inclusive nas gratuitas. O nosso guia Onde publicar a página web que a sua IA fez passa pelas opções em palavras simples. No nosso próprio site usamos o Firebase Hosting.

Para mostrar o jogo dentro de uma página do seu próprio site, adicione assim:

<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>

A parte allow="fullscreen" deixa os jogadores usarem o botão de tela cheia. Se você enviar uma versão nova e ainda ver a antiga, aperte Ctrl+F5 para o navegador carregá-la do zero.

Não há limite

Depois que a base está pronta, todo o resto está a um pedido de distância: um inimigo novo, um cenário novo para a próxima fase, um chefe mais difícil, outra arma, um tipo de jogo diferente. Para um visual novo, peça à IA de imagens outro conjunto de imagens e entregue à IA de conversa. O que antes precisava de uma equipe e semanas de trabalho hoje precisa de uma noite e um pouco de imaginação.

Bom saber antes de começar

O que fazer com o jogo é decisão sua

Quando o jogo estiver pronto, quem decide o que acontece depois é você. Compartilhe nas redes sociais, mande o link para os amigos, coloque no seu próprio site ou guarde só para você. Não existe resposta certa, e a graça é que foi você quem fez.

Perguntas frequentes