Este projeto consiste no desenvolvimento de uma aplicação web interativa que implementa o jogo clássico Ping-Pong (Pong) utilizando JavaScript puro e a API Canvas do HTML5.
O objetivo principal é consolidar fundamentos de lógica de programação, manipulação gráfica e controle de animação no navegador, sem utilização de bibliotecas ou frameworks externos.
A aplicação executa totalmente no lado do cliente (client-side), com renderização dinâmica em tempo real.
A aplicação foi estruturada de forma modular, utilizando objetos JavaScript para representar os principais componentes do jogo:
field→ Responsável pela renderização do campo.line→ Linha central divisória.leftPaddle→ Raquete controlada pelo usuário via mouse.rightPaddle→ Raquete controlada por lógica automatizada (IA simples).ball→ Responsável pela movimentação, colisões e lógica de pontuação.score→ Controle e renderização da pontuação.
A renderização gráfica é realizada através do CanvasRenderingContext2D, manipulando diretamente o contexto 2D do elemento <canvas>.
O loop principal da aplicação utiliza requestAnimationFrame, garantindo atualização contínua e otimizada da animação.
- Controle da raquete do jogador por meio de evento
mousemove - Movimentação automatizada da raquete adversária (IA básica)
- Sistema de colisão com:
- Raquetes
- Bordas superior e inferior do campo
- Sistema de pontuação dinâmica
- Reset de posição após pontuação
- Aumento progressivo de velocidade (dificuldade escalável)
- Loop de renderização contínuo
- Manipulação do DOM
- Canvas API (renderização gráfica 2D)
- Estruturação modular com objetos JavaScript
- Controle de animação com
requestAnimationFrame - Detecção de colisão baseada em coordenadas
- Controle de eventos (
addEventListener) - Lógica vetorial básica (direção e velocidade)
- Atualização dinâmica de estado em tempo real
Para executar o projeto, basta abrir o arquivo HTML em qualquer navegador moderno.
Pedro Molinari