🎮 Criando um jogo retrô para minhas filhas com HTML, CSS, JavaScript e IA

🌌 CodeVerse2026 - Artigo #10

🧑💻 Fala Galera Dev! 👋

No artigo de hoje do CodeVerse2026, quero compartilhar um projeto diferente dos anteriores. Ele também envolve HTML, CSS, JavaScript, lógica, erros, testes e aprendizado, mas nasceu de um lugar muito mais pessoal: eu queria criar um jogo para minhas filhas.

O projeto se chama Valentina e Tayná: Aventura no Reino dos Dinossauros, um game simples em estilo retrô, inspirado nos clássicos jogos de plataforma que marcaram gerações, como Super Mario World. A ideia surgiu depois de perceber que minhas filhas gostaram de jogar videogame antigo comigo. Aquilo acendeu uma vontade antiga: criar um jogo parecido, mas com elas dentro da aventura.

A Valentina tem 8 anos e ama princesas, castelos e esse universo mais mágico. A Tayná tem 5 anos e ama dinossauros. Então pensei: por que não unir esses dois mundos em um jogo só? Um game com castelo, cristais, fases, inimigos, dinossauros e um chefão final. Foi assim que esse projeto começou.

🎮 A ideia do jogo

A proposta era criar um jogo de plataforma simples, mas com uma história afetiva por trás. O jogador escolhe entre a Valentina e a Tayná e precisa atravessar fases, coletar cristais, derrotar inimigos e chegar até o castelo mágico.

A Valentina aparece como uma princesa de vestido rosa, representando esse lado mais encantado e mágico. A Tayná aparece com vestido azul, em uma aventura ligada ao mundo dos dinossauros. O jogo mistura os dois universos de uma forma bem infantil, colorida e divertida.

A aventura tem três fases principais: o Vale Encantado, a Floresta Perdida dos Dinossauros e o Castelo do T-Rex. Na última fase, o jogador enfrenta um T-Rex gigante, que funciona como chefão final. Para vencer, é preciso pular na cabeça dele algumas vezes, respeitando o tempo de proteção entre um ataque e outro.

🛠️ Tecnologias usadas

O jogo foi desenvolvido com tecnologias simples da web:

HTML5
CSS3
JavaScript
Canvas API
Imagens em PNG
Áudios em MP3
VS Code
ChatGPT como copiloto de desenvolvimento

A escolha foi proposital. Eu queria fazer algo direto, sem framework, sem biblioteca externa e sem complicar demais. A ideia era usar a base da web para construir um jogo funcional e entender, na prática, como cada parte se encaixava.

Para quem está começando, esse é um ponto importante: nem todo projeto precisa nascer grande. Às vezes, um projeto simples com HTML, CSS e JavaScript puro ensina mais do que tentar começar direto por uma stack enorme. O segredo está em criar algo real, testar, errar, corrigir e melhorar.

🤖 O papel do ChatGPT no desenvolvimento

Esse projeto foi praticamente todo criado com o ChatGPT como meu copiloto. Eu usei o VS Code como ambiente de apoio, criei as pastas manualmente, organizei os arquivos e fui testando tudo no navegador. Mas a maior parte do código foi escrita pelo ChatGPT a partir das minhas solicitações.

Eu diria que mais de 90% do projeto foi escrito pelo ChatGPT. Meu papel foi guiar, testar, corrigir caminhos, ajustar detalhes, identificar bugs e pedir melhorias até o jogo ficar do jeito que eu imaginava. Eu quase não escrevi linhas de código do zero. O que fiz foi conduzir o processo.

E aqui tem uma diferença importante: isso não foi simplesmente pedir “crie um jogo” e pronto. Foi uma conversa longa, cheia de etapas. Eu perguntava, testava, mandava print do erro, explicava o que queria mudar, pedia os arquivos completos de novo, ajustava nomes de imagens, sons, pastas e ia refinando aos poucos.

🧭 Eu não programei sozinho, eu conduzi o projeto

Uma das maiores lições desse projeto foi entender que usar IA no desenvolvimento não significa desligar o cérebro. Pelo contrário. Você precisa saber explicar o que quer, perceber quando algo não está bom, testar o resultado e pedir correções com clareza.

Eu fui funcionando quase como um diretor do jogo. O ChatGPT escrevia o código, mas eu dizia o que precisava acontecer: a fase 2 estava parecida demais com a fase 1, o T-Rex estava parado, o botão mobile estava grande demais, o personagem virava para o lado errado, o fundo estava poluído, o dinossauro parecia estar voando, o mobile precisava de botão de reiniciar.

Esse processo me mostrou que, mesmo quando a IA escreve o código, o desenvolvedor continua sendo essencial. É ele quem valida, organiza, testa e transforma uma resposta genérica em um produto real.

📁 Começando pela estrutura do projeto

Antes de qualquer coisa, precisei montar a estrutura de pastas. Fiz isso manualmente, mas seguindo as orientações do ChatGPT. A organização ficou simples e clara:

/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── game.js
└── assets/
  ├── imagens/
  └── sons/

Dentro da pasta de imagens, coloquei os arquivos das personagens, castelo, cristais, dinossauro pequeno, T-Rex e imagens de apoio. Dentro da pasta de sons, adicionei arquivos MP3 para música de fundo, pulo, coleta de cristal, derrota, vitória e chefão final.

Essa parte parece básica, mas para quem está começando é fundamental. Um projeto desorganizado vira uma dor de cabeça muito rápido. Vários erros que apareceram no início eram justamente de caminho de arquivo, CSS que não carregava ou imagem que não aparecia porque o nome ou a pasta estavam diferentes.

🧩 Desenvolvimento por etapas

O jogo não nasceu completo de uma vez. Ele foi sendo construído em blocos. Primeiro veio a estrutura básica com HTML, CSS e JavaScript. Depois veio o canvas, o cenário, o personagem, a movimentação, o pulo e as colisões.

Em seguida, comecei a pedir novas camadas: cristais coletáveis, pontuação, inimigos, fases diferentes, tela inicial, escolha de personagem, sons, mobile, botão de reiniciar e o chefão final. Cada parte nova gerava novos bugs, e cada bug virava uma nova solicitação para o ChatGPT corrigir.

Esse foi um aprendizado muito bom para desenvolvedores juniors: tente construir por partes. Se você pede tudo de uma vez, fica difícil entender onde está o erro. Quando você cria uma funcionalidade por vez, consegue testar melhor e enxergar o projeto evoluindo.

👑 Escolha de personagem

Uma das primeiras melhorias importantes foi criar uma tela inicial onde o jogador pudesse escolher entre Valentina e Tayná. No começo, era apenas um card simples com texto e emoji. Depois fui melhorando e pedi para usar as imagens reais das personagens dentro dos cards.

A tela passou a ter dois quadrados: um rosa para a Valentina e um azul para a Tayná. Dentro de cada card, coloquei o busto da personagem e o nome. Isso deixou o jogo mais personalizado e com cara de presente mesmo, não apenas um protótipo genérico.

Também precisei ajustar essa tela no mobile. Em pé, a tela ficava grande demais. Então pedi para adaptar o CSS para caber melhor no celular, diminuir fontes, reduzir cards e organizar melhor os elementos.

🕹️ Movimento, pulo e colisões

A parte de movimentação foi uma das mais importantes. O personagem precisava andar para esquerda e direita, pular, cair com gravidade e parar sobre as plataformas. Isso foi feito com JavaScript usando o Canvas API.

Também foi necessário ajustar a lógica de colisão. O jogador deveria morrer ao encostar nos inimigos pelo lado ou por baixo, mas deveria derrotar o inimigo ao pular em cima dele. Essa regra parece simples, mas exige cuidado, porque o jogo precisa saber se o personagem está caindo, se veio de cima e se realmente tocou a parte superior do inimigo.

Esse tipo de lógica é muito bom para treinar pensamento de programação. Você começa a entender que um jogo não é só desenho na tela. Ele é uma combinação de posição, velocidade, colisão, estado, tempo e regras.

🦖 Inimigos e chefão final

Depois dos inimigos pequenos, veio a ideia de criar um chefão final: um T-Rex grande na fase 3. A primeira versão dele não ficou boa. Ele andava um pouco e depois parava. Depois começou a seguir o personagem de forma estranha. Em outro momento, ficava alternando rapidamente entre esquerda e direita, parecendo bugado.

Fui mandando prints e explicando o comportamento. O ChatGPT foi ajustando a lógica para o T-Rex seguir o jogador com uma zona de tolerância, sem ficar tremendo de um lado para o outro. Também criamos uma barra de vida para ele e a regra de que seriam necessários cinco pulos para derrotá-lo.

Outro detalhe importante foi o tempo de proteção. Se o jogador pudesse pular várias vezes seguidas na cabeça do T-Rex, ficaria fácil demais vencer. Então adicionamos um intervalo de três segundos entre os ataques. Durante esse tempo, o T-Rex fica protegido e o jogador precisa esperar para atacar novamente.

🧠 Ajustando a dificuldade

A fase 1 e a fase 2 estavam muito parecidas no começo. Então pedi para deixar a fase 2 mais diferente e mais difícil. A solução foi mudar a posição das plataformas, aumentar a quantidade de cristais, colocar inimigos mais rápidos e criar uma sensação de progressão.

Na fase 3, além do T-Rex, também precisei cuidar para que o jogador não pudesse ficar em cima de uma plataforma e derrotar o chefão sem risco. Isso deixaria o jogo fácil demais. Então foi criada uma regra impedindo o dano no T-Rex quando o jogador estivesse parado sobre uma plataforma superior.

Esses ajustes mostram um ponto importante sobre game design: fazer funcionar é uma coisa, fazer ficar divertido é outra. Às vezes o código funciona, mas a experiência não está boa. É aí que entram testes, ajustes e sensibilidade para perceber se o desafio está justo.

🖼️ Imagens geradas e refinadas

As imagens também foram criadas com apoio da IA. Pedi imagens em pixel art para o castelo, cristais, dinossauro pequeno, T-Rex, T-Rex levando dano, plataformas e fundos de fase.

Nem tudo funcionou de primeira. Alguns fundos ficaram muito poluídos e atrapalhavam a jogabilidade. Os itens e plataformas ficavam difíceis de ver. Então decidi voltar para um fundo mais simples, desenhado pelo próprio Canvas, com cores chapadas, nuvens, árvores, vulcões e elementos leves.

Também aconteceu um problema curioso: algumas imagens tinham muito espaço transparente em volta. Isso fazia os dinossauros parecerem que estavam voando. No começo, tentei corrigir pelo código, descendo a imagem no canvas. Depois percebi que o problema real estava nas imagens. Cortei os arquivos, removi o excesso de espaço em branco e tudo ficou melhor.

Essa foi uma boa lição: às vezes o bug não está no código. Está no asset.

🔊 Sons e música de fundo

Depois que o jogo já estava funcional, adicionei sons. Busquei no google sites para baixar efeitos sonoros e encontrei o https://pixabay.com/pt/sound-effects/, depois de baixar os sons que precisava criei uma pasta assets/sons e coloquei arquivos MP3 para cada situação do jogo.

# Usei sons para:

música de fundo;
pulo;
coleta de cristal;
perda de vida;
derrota de inimigo;
conclusão de fase;
derrota do chefão;
fim de jogo.

Também ajustamos o volume da música de fundo para 70%, para ela não ficar alta demais. O som deixou o jogo muito mais vivo. É impressionante como um efeito sonoro simples muda a sensação de jogar.

Essa parte também trouxe desafios, porque navegadores às vezes bloqueiam áudio automático até o usuário interagir com a página. Então foi preciso iniciar a música depois da escolha da personagem e reiniciar a trilha ao começar uma nova fase.

📱 Adaptação para mobile

Uma parte muito importante foi adaptar o jogo para celular. No desktop, o jogador usa teclado: setas ou A/D para andar, espaço para pular, P para pausar e R para reiniciar. Mas no celular não tem teclado físico.

Então criamos botões na tela: um botão de pulo e dois botões de movimento. No início, os botões ficaram grandes demais e atrapalhavam a visão. Depois pedi para deixar menores, mais transparentes e reposicionados. O botão de pulo ficou de um lado e os botões de movimento do outro.

Também ajustamos o placar no mobile. Antes, pontos, cristais e vidas ficavam grandes e ocupavam muito espaço. Depois foram colocados lado a lado, com fonte menor, para caber em uma única linha.

Outro detalhe foi a orientação da tela. O jogo foi pensado para rodar melhor com o celular deitado. Então adicionamos uma mensagem pedindo para virar o celular quando ele estivesse em modo retrato.

❤️ Sistema de vidas com corações

No começo, as vidas apareciam como número: Vidas: 3. Depois pedi para deixar isso mais visual. A solução foi trocar o número por três corações vermelhos. Quando o jogador perde uma vida, um coração fica cinza. Então o placar fica assim:

Vidas: ❤️❤️❤️
Vidas: ❤️❤️🩶
Vidas: ❤️🩶🩶
Vidas: 🩶🩶🩶

É um detalhe pequeno, mas deixa o jogo com uma linguagem mais próxima do universo infantil e também mais fácil de entender visualmente.

🔁 Reiniciar no mobile e jogar novamente

Durante os testes, percebi um problema: quando o jogador perdia no mobile, a tela dizia para apertar R para reiniciar. Só que no celular não existe tecla R disponível durante o jogo.

Então pedi para adicionar um botão de REINICIAR no mobile quando o jogador perdesse todas as vidas. Depois percebi outro detalhe: quando o jogador vencia o jogo, também não havia um botão para começar de novo. Então ajustamos para aparecer JOGAR NOVAMENTE ao vencer.

Esse é um ótimo exemplo de como testar no ambiente real muda tudo. No desktop, o jogo parecia resolvido. No mobile, apareceu uma necessidade nova. Isso acontece muito em projetos reais.

🐛 Bugs que apareceram no caminho

Esse projeto teve vários bugs e ajustes. Alguns deles foram simples, outros deram mais trabalho. Entre os principais problemas estavam:

CSS não carregando por erro de caminho;
tela com área branca sobrando;
canvas com bordas azuis que não combinavam com a fase;
personagens virando para o lado errado;
inimigos parecendo flutuar;
cristais pequenos demais;
T-Rex travando ou alternando direção rapidamente;
botão mobile cobrindo elementos do jogo;
placar ocupando espaço demais no celular;
som de pulo que não tocava por nome de arquivo errado;
imagens com excesso de área transparente;
tela final sem opção de jogar novamente no mobile.

Cada erro desses virou uma pequena aula. Eu mandava print, explicava o comportamento e pedia uma explicação e sugestão de correção. O ChatGPT sugeria a alteração, eu testava, e assim o jogo foi melhorando.

Esse processo é muito parecido com trabalhar com um dev mais experiente ao lado. Você mostra o problema, recebe uma sugestão, testa, aprende e ajusta.

💻 O que eu realmente fiz no código

É importante ser honesto: eu não escrevi a maior parte do código manualmente. Meu trabalho foi criar a ideia, organizar o projeto, montar as pastas, colar os arquivos no VS Code, testar no navegador, ajustar caminhos, identificar erros e guiar o ChatGPT.

Eu fiz algumas pequenas correções, principalmente em caminhos de arquivos e organização. Mas a construção pesada do HTML, CSS e JavaScript foi feita pela IA, com base nas minhas solicitações.

Mesmo assim, eu aprendi muito. Porque, para guiar bem, você precisa entender minimamente o que está acontecendo. Se você não sabe nada, não consegue perceber se a resposta está errada. Não consegue identificar se o problema é CSS, JavaScript, caminho de imagem, lógica de colisão ou responsividade.

Então esse projeto reforçou uma ideia importante: IA ajuda muito, mas conhecimento técnico continua sendo necessário.

⏱️ Tempo de desenvolvimento

Uma curiosidade é que esse jogo levou cerca de dois dias para sair da ideia e chegar em uma versão jogável. Mas não foram dois dias inteiros codando.

Foi desenvolvimento no tempo livre mesmo. Entre trabalho, família, filhos e responsabilidades do dia a dia, não sobra tanto tempo assim. Então fui fazendo aos poucos, em pequenos intervalos, testando uma parte aqui, corrigindo outra ali e avançando conforme dava.

Isso me mostrou uma coisa muito interessante: com uma ideia clara, um pouco de conhecimento e uma IA como copiloto, é possível transformar um projeto pessoal em algo real mesmo com pouco tempo disponível.

💡 O que esse projeto ensina para os novos devs

Para quem está começando na programação, esse projeto deixa algumas lições importantes.

A primeira é: comece pequeno. Não tente criar um jogo gigante logo de cara. Faça uma tela, depois um personagem, depois movimento, depois colisão, depois inimigos. Projetos reais crescem por partes.
A segunda é: aprenda a perguntar. Usar IA não é só pedir código. É explicar contexto, mostrar erro, dizer o que mudou, pedir ajustes específicos e testar a resposta.
A terceira é: não tenha vergonha de usar ferramentas. O importante é aprender durante o processo. Se a IA escreveu o código, leia, teste, quebre, corrija e tente entender o que está acontecendo.
A quarta é: projeto com propósito motiva mais. Criar um jogo para minhas filhas me deu muito mais vontade de insistir nos bugs do que um exercício genérico qualquer.

🚀 O que esse projeto me ensinou

Esse projeto me ensinou que programação pode ser muito mais do que resolver problemas técnicos. Ela também pode ser uma forma de criar memórias, contar histórias e transformar carinho em algo interativo.

Também aprendi bastante sobre Canvas, colisão, controle de estado, responsividade, organização de assets, sons, lógica de jogo e, principalmente, sobre como trabalhar com IA de forma prática.

A maior lição foi entender que a IA não substituiu minha participação. Ela acelerou o processo. Mas o olhar, a intenção, os testes e as decisões continuaram sendo meus.

❤️ O valor pessoal do projeto

Esse jogo não foi apenas um exercício de programação. Foi um presente.

Ver a Valentina e a Tayná dentro de um jogo, passando por fases, coletando cristais, enfrentando dinossauros e chegando ao castelo mágico, deu um significado muito maior para o projeto.

Programação também pode ser isso. Não apenas sistemas, APIs, dashboards ou aplicações empresariais. Às vezes, programação é criar algo simples, mas que vai gerar uma lembrança especial. E talvez seja isso que mais me marcou nesse projeto: código também pode carregar afeto.

🔗 Quer testar o jogo?

🎮 Jogue aqui: https://game-retro-2026.vercel.app
📂 Repositório no GitHub: https://github.com/Carlos-CGS/GameRetro2026

🚀 Conclusão

No final, esse jogo começou com uma ideia simples: criar algo divertido para minhas filhas. Mas, no caminho, virou um grande aprendizado sobre HTML, CSS, JavaScript, Canvas, responsividade, IA, organização de projeto e criação de jogos.

Foi também uma experiência prática sobre o futuro do desenvolvimento. Um futuro onde o programador não precisa necessariamente escrever cada linha sozinho, mas precisa saber pensar, orientar, testar, revisar e melhorar.

Para mim, esse foi o maior valor do projeto. Eu não apenas criei um jogo. Eu aprendi uma nova forma de criar.

🔥 Código bom não é só aquele que funciona. É aquele que carrega uma história por trás. 🚀

🚀 Curtiu acompanhar essa jornada?

Então me acompanha por aqui porque no CodeVerse2026 eu venho compartilhando, de forma prática e real, meus aprendizados, projetos, erros, bugs, ideias e evoluções dentro da área tech. 👨💻🔥

🔗 LinkedIn: Carlos Garcia no LinkedIn
💻 GitHub: Carlos-CGS no GitHub

E se testar o jogo, me manda um feedback. Vou curtir muito saber o que vocês acharam. 🚀