‹ Voltar

 

Código JavaScript do clássico JOGO PONG

Este projeto é uma recriação do clássico jogo Pong, desenvolvido utilizando JavaScript com a biblioteca p5.js. A ideia principal do jogo é controlar uma raquete e impedir que a bolinha ultrapasse sua área, enquanto o oponente, controlado por inteligência artificial, faz o mesmo do outro lado. O jogo é simples, mas desafiador, exigindo reflexos rápidos e estratégias para vencer.

Principais funcionalidades:

Movimento da bolinha: A bolinha se move de maneira constante pela tela e muda de direção ao colidir com as bordas da área de jogo.

Controle da raquete: O jogador controla sua raquete utilizando as setas do teclado (para cima e para baixo), enquanto a raquete do oponente é controlada automaticamente.

Placar: O jogo possui um sistema de pontuação, onde o jogador e o oponente ganham pontos quando a bolinha ultrapassa a raquete adversária.

Colisões e sons: Quando a bolinha colide com uma raquete, há um efeito sonoro que aumenta a imersão no jogo. Além disso, a física das colisões permite que a bolinha rebata de maneira realista.

Este código é um excelente ponto de partida para quem deseja aprender a programar jogos em 2D e utilizar a biblioteca p5.js, que facilita a criação de gráficos e animações interativas em JavaScript. O projeto também permite várias melhorias, como aumentar a dificuldade do jogo, adicionar novos elementos visuais ou até criar modos de jogo diferentes.

Explore o código e divirta-se adaptando-o para criar sua própria versão do Pong!

Link do projeto completo: https://editor.p5js.org/roberto.nunes.santos/sketches/MrAUkub5yY

 

O código abaixo pode ser copiado e usado, lembrando de manter os devidos créditos:

//Código criado pelo Professor Roberto Nunes dos Santos Para mais informações, visite: https://profrnsantos.ceducap.com.br //variaveis da bolinha let xBolinha = 300; let yBolinha = 200; let diametro = 40; let raio = diametro / 2; //variaveis da raquete let xRaquete = 5; let yRaquete = 150; let larguraRaquete = 10; let comprimentoRaquete = 100; //variaveis da raquete2 let xRaquete2 = 585; let yRaquete2 = 150; let larguraRaquete2 = 10; let comprimentoRaquete2 = 100; //velocidade da bolinha let velocidadeXBolinha = 6; let velocidadeYBolinha = 6; let velocidadeYRaquete2; //placar do jogo let meusPontos = 0; let pontosDoOponente = 0; let chanceDeErrar = 0; //verifica colisão let colidiu = false; //sons do jogo let raquetada; let ponto; let trilha; function preload() {     trilha = loadSound("trilha.mp3");     ponto = loadSound("ponto.mp3");     raquetada = loadSound("raquetada.mp3"); } //fundo function setup() {   createCanvas(600, 400);    trilha.loop(); } //movimento do jogo function draw() {   background(0);   mostraBolinha();    movimentaBolinha();   verificaBolinha();    mostraRaquete(xRaquete, yRaquete);   mostraRaquete(xRaquete2, yRaquete2);   movimentaMinhaRaquete();   //verificaColisaoRaquete();   movimentaRaquete2();   incluiPlacar();   marcaPonto();   colisaoRaqueteBiblioteca(xRaquete, yRaquete);   colisaoRaqueteBiblioteca(xRaquete2, yRaquete2);   //preload();   } function movimentaBolinha(){   xBolinha += velocidadeXBolinha;  yBolinha += velocidadeYBolinha; } function mostraBolinha(){ circle(xBolinha, yBolinha, diametro);   } function verificaBolinha(){      if (xBolinha + raio > width || xBolinha - raio < 0) {         velocidadeXBolinha *= -1;     }     if (yBolinha + raio > height || yBolinha - raio < 0) {         velocidadeYBolinha *= -1;     } }   function mostraRaquete(x, y){    rect(x, y, larguraRaquete, comprimentoRaquete); } function movimentaMinhaRaquete() {     if (keyIsDown(UP_ARROW)) {         yRaquete -= 10;     }     if (keyIsDown(DOWN_ARROW)) {         yRaquete += 10;     } } function movimentaRaquete2(){    velocidadeYRaquete2 = yBolinha - yRaquete2 - larguraRaquete / 2 - 30;     yRaquete2 += velocidadeYRaquete2 + chanceDeErrar   calculaChanceDeErrar() } function calculaChanceDeErrar() {   if (pontosDoOponente >= meusPontos) {     chanceDeErrar += 1     if (chanceDeErrar >= 29){     chanceDeErrar = 90     }   } else {     chanceDeErrar -= 1     if (chanceDeErrar <= 25){     chanceDeErrar = 25     }   } } //esta função não está sendo utilizada function verificaColisaoRaquete() {     if (xBolinha - raio < xRaquete + larguraRaquete         && yBolinha - raio < yRaquete + comprimentoRaquete && yBolinha + raio > yRaquete)               {       velocidadeXBolinha *= -1;     }    }   function colisaoRaqueteBiblioteca(x, y) {     colidiu =     collideRectCircle(x, y, larguraRaquete, comprimentoRaquete, xBolinha, yBolinha, raio);     if (colidiu){       velocidadeXBolinha *= -1;       raquetada.play();     } } function incluiPlacar() {   stroke(255);     textAlign(CENTER);     textSize(16);     fill(color(255, 140, 0));     rect(150, 10, 40, 20);     fill(255);     text(meusPontos, 170, 26);     fill(color(255, 140, 0));     rect(450, 10, 40, 20);     fill(255);     text(pontosDoOponente, 470, 26); } function marcaPonto() {     if (xBolinha > 580) {         meusPontos += 1;        ponto.play();     }     if (xBolinha < 20) {         pontosDoOponente += 1;        ponto.play();     } } function goToStart() { // Redireciona para a página inicial window.location.href = 'https://profrnsantos.ceducap.com.br/RPG.html'; } Copiar Código

 

Ver Modelo em Funcionamento no Link Abaixo:

https://editor.p5js.org/roberto.nunes.santos/full/MrAUkub5yY

 

 

--- Compartilhar ---