Jogo De Pingue Pongue

Construindo um jogo de pingue pongue funcional

Comecei minha primeira versão de um jogo de pingue pongue há alguns anos, usando HTML5 Canvas e JavaScript puro, sem frameworks. O resultado foi simples: duas raquetes, uma bola, placar básico. A parte que mais gente subestima é a colisão. Parece óbvio, mas a maioria dos tutoriais que você encontra na internet trata a detecção de colisão como algo trivial e acaba com bolas atravessando raquetes ou preso nos cantos da tela. Na minha experiência, o maior problema que encontrei foi com a velocidade da bola. Quando eu ajustava a velocidade para valores acima de 12 pixels por frame, a bola frequentemente passava direto pela raquete do oponente em vez de quicar. Isso acontece porque o movimento passo a passo não detecta a colisão se a bola pular da posição de contato para a posição após a colisão em um único frame. A solução que funcionou para mim foi implementar um sistema de previsão de trajetória, calculando onde a bola estaria entre frames anteriores e verificando a colisão nesse intervalo. Cortei bugs de colisão de horas de depuração para cerca de 15 minutos só com essa mudança.

Como funciona um jogo de pingue pongue básico

O jogo de pingue pongue roda em torno de três componentes principais: a bola, as raquetes e o loop de renderização. A bola se move com velocidade horizontal e vertical constante, invertendo a direção ao colidir com as bordas superior e inferior ou ao ser atingida por uma raquete. As raquetes controlam a direção de rebatida dependendo de onde a bola as atinge. Se bater no centro da raquete, a bola retorna com ângulo reto. Se bater nas bordas, ganha ângulo mais fechado, o que adiciona estratégia ao jogo. Para o loop de renderização, eu recomendo usar requestAnimationFrame. Ele sincroniza a animação com a taxa de atualização do monitor e evita aquele efeito de tremedeira que aparece quando se usa setInterval. No meu projeto, a taxa média ficou em 60fps estáveis em navegadores modernos, com quedas pontuais para 45fps em dispositivos móveis mais antigos.

Código essencial para começar

A estrutura básica é mais curta do que muitos imaginam. Aqui está o que realmente funciona: Primeiro, o canvas. Defina um tamanho fixo, algo como 800 por 400 pixels. Isso dá uma proporção confortável sem ocupar a tela toda. Em seguida, crie objetos para a bola e as raquetes com propriedades de posição, velocidade e dimensões. Para a física da bola, a lógica de colisão com as paredes é direta. Se a posição Y da bola ultrapassar a altura do canvas ou chegar a zero, inverta a velocidade Y. Para as raquetes, você precisa verificar se a posição X da bola coincide com a posição X da raquete e se a posição Y está dentro da altura da raquete. Se sim, inverta a velocidade X e ajuste a velocidade Y com base em onde a bola atingiu a raquete.

A entrada do jogador deve ser mapeada para teclas de seta ou WASD. Recomendo ler o estado das teclas em um objeto separado e aplicar o movimento no loop principal, em vez de vincular diretamente aos eventos de teclado. Isso evita atrasos e permite controle mais preciso.

Pegadinhas que ninguém conta

Uma coisa que passei batido nos primeiros testes foi o spin. Em uma partida real de pingue pongue, o efeito aplicado à bola muda completamente a trajetória após o rebound. No mundo digital, isso se traduz em um ajuste da velocidade Y baseado na velocidade vertical da raquete no momento do contato. Se o jogador estiver movendo a raquete para cima quando a bola bater, a bola ganha um componente adicional para cima. Esse detalhe transforma um jogo genérico em algo muito mais interessante, e leva apenas três linhas de código para implementar. Outro problema recorrente é o placar. A maioria dos iniciantes usa variáveis globais para controlar os pontos, mas isso fica desorganizado rapidamente. Mantive o placar dentro do objeto do jogo, atualizando apenas após gols válidos verificados pela posição da bola além das linhas de fundo. Também adicionei um timer opcional de dois minutos que termina a partida automaticamente.

Limitações equando o jogo de pingue pongue não funciona bem

Este formato simples tem limitações claras. Em resoluções 4K ou telas ultrawide, o canvas de 800 por 400 fica pequeno demais sem escalonamento. O escalonamento via CSS resolve a aparência, mas pode causar problemas de precisão nos cliques e na detecção de colisão se você adicionar controle por mouse. Nesse caso, é necessário fazer o mapeamento da coordenada do mouse para a escala do canvas. Também não espere jogabilidade multiplayer online com esta base. A comunicação em tempo real requer um servidor WebSocket ou similar, e a latência de rede introduz problemas de sincronia que este código não aborda. Se o objetivo for multiplayer, considere usar uma engine como Phaser ou Godot, que têm sistemas de rede mais maduros, mesmo que isso aumente a complexidade inicial do projeto. O jogo de pingue pongue, no seu núcleo, é um exercício sólido de fundamentos de desenvolvimento. Ele ensina loop de jogo, colisão, input handling e gerenciamento de estado. Se você está começando, vale a pena construir do zero pelo menos uma vez. A sensação de ver a bola quicando na tela por conta própria, depois de resolver os primeiros bugs de colisão, é um bom indicador de que os conceitos básicos estão finalmente fazendo sentido.

Downloads e recursos

Um repositório completo com o código comentado pode ser encontrado em plataformas como GitHub. Procure por projetos open source de Pong que usem Canvas, pois há várias versões bem estruturadas que servem de ponto de partida. Antes de forkar, verifique a data do último commit e se o código usa padrões modernos de JavaScript, como arrow functions e let/const em vez de var. Para quem quer levar adiante, os próximos passos naturais incluem adicionar IA para o oponente, efeitos sonoros e partículas de colisão. A IA, em particular, é um tópico enorme. Um approach simples mas eficaz é fazer a raquete adversária seguir a posição Y da bola com uma velocidade máxima limitada, o que cria um oponente desafiador sem precisar de machine learning.