Jogo De Pular Obstáculos

Como criar um jogo de pular obstáculos em JavaScript puro

Vou direto ao ponto porque muita gente complica isso desnecessariamente. O jogo de pular obstáculos é basicamente um loop de renderização, uma gravidade e um input. Se você já teve dificuldade para implementar, provavelmente o problema não é o conceito, mas a forma como organizou o código antes de começar.

O que é jogo de pular obstáculos na prática

É um gênero onde o jogador controla um personagem que precisa saltar sobre barreiras geradas proceduralmente. O Dino do Chrome é o exemplo mais famoso, mas existem centenas de variantes. A mecânica central gira em torno de três coisas: gravidade simulada, detecção de colisão e geração infinita de obstáculos. O que pouca gente entende no início é que a sensação de "pulômetro bom" vem quase inteiramente dos números da física, não da arte. Um pulo com velocidade inicial de -12 pixels por frame e aceleração gravitacional de 0.6 por frame já entrega uma sensação aceitável. Ajuste esses dois valores e todo o resto muda junto.

Eu tive um problema específico há alguns meses trabalhando em um jogo similar. O pulo parecia lento e pesado em telas com taxa de atualização acima de 60Hz. O Canvas estava sendo redesenhado a cada frame, mas sem um delta time consistente, os objetos se moviam mais rápido em monitores de 144Hz. A solução foi simples: calcular a posição baseada em tempo real (delta em milissegundos) em vez de depender da taxa de frames. Assim, a velocidade de pulo ficou constante em qualquer hardware.

Implementação passo a passo

1. Configuração básica do canvas

Crie um arquivo HTML simples com um elemento canvas e importe um script externo. O canvas precisa ter largura e altura fixas. Recomendo 800x400 pixels como ponto de partida.

<canvas id="game" width="800" height="400"></canvas>

No JavaScript, busque o canvas e pegue o contexto 2D. Isso é o mínimo necessário antes de qualquer coisa.

2. O jogador e a física de pulo

O jogador é basicamente um retângulo com propriedades de posição, velocidade e tamanho. Defina um objeto com these properties:

const player = {
  x: 100,
  y: 300,
  width: 40,
  height: 60,
  velocityY: 0,
  isJumping: false,
  gravity: 0.6,
  jumpStrength: -12,
  groundLevel: 300
};

O pulo acontece quando você pressiona uma tecla. A lógica é: se o jogador estiver no chão, defina velocityY como jumpStrength e marque isJumping como true. No loop de atualização, some velocityY à posição Y e aumente velocityY por gravity a cada frame. Quando o jogador passar do groundLevel, force velocityY de volta a zero e isJumping para false.

👉 Clique no botão abaixo para saber mais sobre o assunto!

Jogo De Pular Obstáculos - Jogo De Pular Obstáculos - RETOEDU

Jogo De Pular Obstáculos - Jogo de pular obstaculos - Jogos Online Grátis & Desenhos

Jogo De Pular Obstáculos - Jogos de Pular Obstáculos no Jogos 360

3. Geração de obstáculos

Obstáculos são outro conjunto de retângulos que se movem da direita para a esquerda. Crie um array vazio e, a cada X frames, empurre um novo obstáculo com posição X inicial fora da tela (por exemplo, 850). O intervalo entre obstáculos deve ser aleatório, mas dentro de um range razoável. Recomendo entre 60 e 120 frames. Obstáculos muito próximos geram um jogo impossível. Muito espaçados tornam tudo monótono.

4. Detecção de colisão

A colisão entre dois retângulos é uma das coisas mais fáceis de implementar. Basta verificar se os retângulos se sobrepõem em ambos os eixos:

function checkCollision(rect1, rect2) {
  return rect1.x < rect2.x + rect2.width &&
         rect1.x + rect1.width > rect2.x &&
         rect1.y < rect2.y + rect2.height &&
         rect1.y + rect1.height > rect2.y;
}

Se detectar colisão, o jogo acaba. Simples assim.

5. O loop principal

O coração do jogo é o requestAnimationFrame. Dentro dele, você faz três coisas: atualiza a lógica (física, obstáculos), limpa o canvas e redesenha tudo. A ordem importa. Atualize antes de desenhar. Se quiser um jogo de pular obstáculos funcional rapidamente, procure por tutoriais no GitHub ou em canais específicos de desenvolvimento. Muitos projetos open source já têm essa base pronta e são um ponto de partida melhor do que começar do zero.

Pegadinhas comuns que ninguém avisa

O primeiro problema que quase todo mundo encontra é o pulo duplo ou tripo. Sem um check adequado, o jogador pode pular no ar e continuar subindo. A solução é verificar isJumping antes de aplicar o pulo. Só permite o pulo se isJumping for false. Outro problema comum é a velocidade dos obstáculos. Se você usar um valor fixo, o jogo pode ficar muito fácil no começo e impossível mais tarde, ou vice-versa. A solução é aumentar gradualmente a velocidade a cada obstáculo superado, mas com um teto para não travar o computador do jogador.

Também vale a pena considerar o uso de delta time desde o início. Muitos tutoriais ensinam a depender de frame count, mas isso quebra o jogo em telas com taxas de atualização diferentes. Um deltaTime calculado a partir do timestamp do requestAnimationFrame resolve isso em duas linhas.