O que é o joguinho do avião e como ele realmente funciona
Você provavelmente já viu. Aquele jogo simples onde um aviãozinho voa pelo céu, desvia de obstáculos e tenta bater um recorde. Geralmente aparece em sites de brincadeira, em páginas de erro antigas ou como aquele passatempo automático quando o Wi-Fi cai no aeroporto. O nome oficial varia — tem quem chamava de o joguinho do avião, outros conheciam como Chrome Dino mas versão de avião, e existia um bem popular nos anos 2000 chamado simplesmente Airplane Game. O conceito é basicamente um endless runner lateral com sprites simples e física de gravidade. O piloto empurra a tecla espaço para subir, solta para descer. Obstáculos aparecem da direita e vão sumindo pela esquerda. A cada obstáculo superado, o score sobe um ponto. Quem sobrevive mais tempo, ganha. A simplicidade é intencional — é um jogo projetado para funcionar em qualquer máquina, até naquelas com recursos ridículos.
Por que o joguinho do avião ficou famoso
O verdadeiro motivo da popularidade não é a jogabilidade. É acessibilidade. O jogo roda em navegador sem download, sem instalação, sem anúncios intrusivos (pelo menos os bons). Funciona em celular, tablet, computador velho, até em alguns elevadores com tela touchscreen. Qualquer pessoa com cinco minutos livres consegue entender na primeira tentativa. Não existe tutorial, não existe menu complexo, não existe sistema de vida ou power-up. Eu comecei a prestar atenção nisso em 2008, quando trabalhava em uma empresa de suporte técnico. Os clientes ligavam dizendo que o computador estava lento, e eu descobria que era porque tinham uma aba do navegador aberta com o jogo rodando há horas, consumindoprocessador sem ninguém jogando de verdade. Aí eu percebi: o jogo tinha virado um vício silencioso de escritório. Funcionava porque era impossível parar quando você ia bem.
Como construir uma versão básica do joguinho do avião
Vamos direto ao código. Se você quer criar seu próprio o joguinho do avião usando HTML5 Canvas e JavaScript puro, o espinhaço é relativamente curto. Eis a estrutura que funciona na prática: A primeira coisa é o loop principal do jogo. Use requestAnimationFrame ao invés de setInterval. O primeiro atualiza de forma sincronizada com a taxa de atualização do monitor, o segundo pode causar dessincronização e comportamentos estranhos em telas com refresh rate variável. Eu perdi uma tarde inteira caçando um bug em que o avião às vezes subia duas vezes seguidas porque o setInterval disparava antes do frame anterior terminar de renderizar.
O avião em si é um retângulo ou sprite com três propriedades principais: posição Y, velocidade Y e aceleração gravitacional. A gravidade é sempre positiva (puxa para baixo). O pulo é uma velocidade negativa instantânea. Todo frame, você adiciona a gravidade à velocidade e a velocidade à posição. Simples. Os obstáculos são gerados fora da tela à direita, se movem para a esquerda a cada frame, e são removidos do array assim que saem pela esquerda. A geração deve ser aleatória mas com regras mínimas: altura mínima, altura máxima, e distância mínima entre um e outro para que o jogo seja jogável. Sem essas regras, você gera dois obstáculos tão próximos que é impossível passar — o jogo fica impossível e os jogadores desistem.
A detecção de colisão usa AABB (Axis-Aligned Bounding Box). Você verifica se o retângulo do avião sobrepõe algum retângulo de obstáculo ou o chão/teto. Não precisa de nada mais complexo que isso para essa classe de jogo. Colisão por pixel seria overengineering e só deixaria o jogo mais lento. Aqui está o núcleo funcional:
👉 Clique no botão abaixo para saber mais sobre o assunto!
variavel aviao = {x: 50, y: 200, velocidade: 0, aceleracao: 0.5, pulo: -8};
variavel obstaculos = [];
variavel score = 0;
variavel jogoRodando = verdadeiro; funcao loop() {
atualizarFisica();
atualizarObstaculos();
verificarColisoes();
renderizar();
se(jogoRodando) requestAnimationFrame(loop);
}
Pegadinhas que ninguém conta
O problema mais comum que todo mundo esquece é a taxa de quadros. Se o jogo roda a 60fps em uma máquina e a 30fps em outra, a velocidade dos obstáculos e a sensibilidade do pulo vão mudar proporcionalmente. A solução é usar delta time — multiplicar todas as velocidades e acelerações pelo tempo entre frames em vez de assumir um frame fixo. Isso garante comportamento consistente entre hardware bom e ruim. Outro ponto: responsividade. Quando a tela muda de tamanho (rotação de celular, janela redimensionada), o canvas precisa se adaptar. Eu encontrei um caso específico onde, em celulares mais antigos, o canvas redimensionava mas a área de colisão ficava desfasada porque o sistema operacional aplicava um zoom automático no navegador. A solução foi travar a orientação do layout com CSS e usar unidades relativas ao viewport.
o joguinho do avião também sofre do mesmo problema que todo jogo endless runner: a dificuldade escala linearmente com o tempo, o que significa que depois de certo ponto fica matematicamente impossível sobreviver para qualquer ser humano. Isso é feature, não bug. Mas se você quer que o jogo seja competitivo de verdade, precisa de um sistema de leaderboard local ou online. Sem ranking, o único incentivo é o ego do jogador, que desgasta rápido.
Onde encontrar versões para jogar
Não recomendo sites aleatórios com banners promocionais e pop-ups. A melhor opção é procurar repositórios open source no GitHub — existem várias versões bem feitas do o joguinho do avião que você pode rodar localmente ou hospedar no seu próprio servidor. A versão mais limpa que eu conheço é a que usa apenas Canvas API sem bibliotecas externas, o que significa que carrega instantaneamente e não tem rastreadores. Se quiser algo pronto e hospedado, procure por clones do jogo em sites como itch.io ou em portfólios de desenvolvedores indie. Evite aqueles sites cheios de anúncios que prometem "o melhor joguinho do avião" — muitos injetam scripts maliciosos ou mineradores de criptomoeda no navegador. Eu vi isso acontecer com um colega que abriu um desses sites no computador da empresa e levou uma multa do setor de TI.
Alternativas e variações
Se o joguinho do avião clássico já cançou, existem variações interessantes. O Flappy Bird seguiu a mesma mecânica mas com dificuldade deliberadamente frustrante. O 2048 Airplane é uma fusão que alguns desenvolvedores fizeram como projeto de estudo. E tem também a versão multiplas plataformas onde você controla dois aviões ao mesmo tempo — uma pra cada tecla — o que transforma o jogo de reflexo puro em coordenação motora. O ponto principal é que a mecânica base é tão flexível que qualquer pessoa com conhecimento básico de programação consegue fazer sua própria versão num final de semana. A parte difícil não é o código, é o polimento — efeitos sonoros, transições suaves, feedback visual quando você bate. É isso que separa um protótipo funcional de algo que as pessoas querem voltar a jogar.
Se você estiver começando agora, não tente construir tudo de uma vez. Comece com o avião subindo e descendo, adicione um obstáculo, aí mais obstáculos, só então adicione score e game over. Cada passo funciona como um teste independente. Se algo quebrar, você sabe exatamente onde procurar.
