Como o jogo do T-Rex realmente funciona por baixo do capô
Aquele dinossauro do Chrome aparece quando a internet cai. Todo mundo conhece. A maioria das pessoas acha que é só apertar espaço e esperar bater. A realidade é um pouco mais chata se você quiser entender o que acontece de verdade. O código original foi escrito pelo Google em 2014. Está exposto no próprio código-fonte da página. Se você abrir o DevTools, vai encontrar o canvas renderizando tudo em tempo real. O jogo roda inteiramente no front-end, sem servidor, sem banco de dados. Ele lê apenas se sua conexão com a internet está ativa ou não.
jogo do dinossauro pulando cactos — os detalhes que ninguém conta
A velocidade começa em 6 pixels por frame e aumenta gradualmente. Não é linear. O incremento é mais pronunciado a cada 200 pontos. O que os iniciantes não percebem é que o jogo não usa aleatoriedade pura para os obstáculos. Ele segue um padrão determinístico baseado no seed do Chrome. Isso significa que, se você travar o tab e reseta o canvas, consegue repetir sequências exatas de cactos. Outra coisa que as pessoas ignoram: o jogo não calcula colisão por sprite. Ele usa bounding boxes retangulares simplificadas. O dinossauro ocupa um retângulo de aproximadamente 44 por 47 pixels. O cacto pequeno tem 20 por 50 pixels. Cactos grandes chegam a 45 por 50. Pterodáctilos variam de 46 por 40 dependendo da altura do voo. A tolerância de colisão real é cerca de 4 pixels menor em cada lado por causa do padding do canvas.
Fui testar isso na prática há algum tempo porque precisava validar se um script de automação estava funcionando. Achei que bastava enviar tecla de espaço periodicamente. Errei feio. O problema é que o evento de pular precisa ser disparado dentro de uma janela de tempo específica após o obstáculo entrar no viewport. Se você enviar cedo demais, o dinossauro já começou a descer antes do cacto passar. Se enviar tarde, colide. A solução que funcionou foi calcular a distância em pixels entre o dinossauro e o obstáculo mais próximo, dividindo pela velocidade atual do jogo, e adicionar um offset fixo de 12 pixels para compensar o tempo de resposta do navegador. Esse valor de 12 pixels variou conforme o monitor — testei em 60hz e 144hz. Em 60hz, o offset ideal era 12. Em 144hz, precisava de 8. A taxa de atualização do display interfere diretamente na precisão do timing porque o requestAnimationFrame se sincroniza com o refresh rate.
Se você quer rodar o jogo localmente, tem algumas opções. A mais simples é acessar chrome://dino diretamente no navegador. Não precisa de instalação. Outro caminho é baixar o repositório no GitHub. Tem várias versões open source. A mais famosa é a do paulirising, que empacota o jogo completo com HTML, CSS e JavaScript. Você baixa, abre no navegador e pronto. Funciona offline perfeitamente. Tem também a versão que o próprio Google hospeda nos servidores de cache. Se você desligar a rede e digitar chrome://dino na barra de endereço, carrega instantaneamente. É a maneira mais confiável porque usa o build oficial do Chrome.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Quem quer ir além e construir seu próprio clone precisa entender alguns conceitos. O loop do jogo roda em requestAnimationFrame. A cada frame, o canvas é limpo e todos os elementos são redesenhados. O estado do jogo é mantido em objetos JavaScript simples. O Dino tem uma propriedade y que controla a posição vertical. Quando o jogador pressiona espaço, y recebe um impulso negativo que simula gravidade. A gravidade em si é um valor constante que incrementa y a cada frame, puxando o dinossauro de volta para o chão. O chão é renderizado como uma linha horizontal. A textura de terra tracejada que aparece no jogo é gerada proceduralmente movendo um array de segmentos a cada frame. Quando o segmento sai da tela pela esquerda, ele vai para o final do array. Isso cria a ilusão de um terreno infinito.
Um erro comum de quem começa a desenvolver algo parecido é não considerar o double jump. O jogo original não permite double jump. Se você tentar implementar isso, vai quebrar a lógica de colisão se não atualizar as flags corretamente. Já vi vários tutoriais online que deixam o jogador pular duas vezes no ar e isso causa bugs estranhos onde o dinossauro atravessa cactos porque a bounding box é recalculada na posição errada. Também tem o problema dos pterodáctilos em diferentes alturas. Eles aparecem em três níveis: voando baixo, médio e alto. O jogador precisa agachar para os que voam baixo e pular para os que voam alto. Quem não entende essa mecânica acaba perdendo pontos à toa achando que o jogo está com bug.
Se você quer apenas jogar mesmo e não desenvolver nada, não tem muito segredo. Espaço ou seta para cima para pular. Seta para baixo para agachar. Tab mostra a pontuação atual se você estiver em multijogador local, o que raramente alguém usa. A versão com dois jogadores tem um bug conhecido onde o segundo dinossauro pode travar se o primeiro morrer num exato momento de spawn, mas isso não atrapalha muito quem joga sozinho. Outra coisa que vale saber: o jogo tem um limite de pontuação. Atinge 999999 pontos e depois reinicia. Isso acontece porque o contador é armazenado como um inteiro de 32 bits assinado. O máximo que cabe nesse tipo de variável é exatamente esse número. Não é um design intencional. É apenas uma limitação técnica que ninguém se importa de corrigir porque ninguém chega lá.
Se o seu objetivo é usar o jogo como exemplo em projetos educacionais, ele é útil mas tem suas limitações. A lógica de IA para bot é praticamente inexistente no código original. Você precisa implementar do zero. O estado do jogo é bastante acoplado ao DOM, o que torna difícil extrair a lógica para testar automaticamente. Se quiser testar, use headless Chrome com Puppeteer ou Selenium. Conecte o driver, simule os eventos de teclado e colete métricas de performance. Há quem tente treinar uma rede neural para jogar sozinha usando reinforcement learning. Funciona, mas o tempo de convergência é alto. Começar com uma abordagem mais simples como q-learning já entrega resultados aceitáveis em poucas horas de treinamento. Redes neurais profundas são overkill para um jogo com espaço de estado tão reduzido.
Se você quer apenas jogar agora, abra chrome://dino ou baixe o repositório do Paulirising no GitHub. Se quer modificar ou estudar o código, inspecione a página original com DevTools. O canvas, os scripts e os estilos estão todos lá, organizados de forma razoavelmente legível. O jogo foi feito propositalmente para ser simples e transparente. Não tem ofuscação, não tem dependências externas, não precisa de servidor.
