1
resposta

Pong com javascript no p5.js pronto com extras

Fiz várias modificações, mudei os sons, inverti as teclas do multiplayer e etc. Além disso, não consegui arrumar, mas diminuí o problema da bolinha ficar presa atrás das raquetes e também com ajuda do fórum limitei o movimento das raquetes para ficarem apenas na tela, sem desaparecer. Também fiz um fim de jogo: quem marcar 10 pontos antes é o vencedor e quando isso acontece, a bola volta e para no centro e aparece uma mensagem indicando quem venceu. Para recomeçar é ESPAÇO. Fazendo isso, percebi que a bola sempre ia para o mesmo lugar, então utilizei a função random() para ter variações do movimento da bolinha quando se inicia o jogo, assim ela pode ir para qualquer um dos cantos e de forma aleatória quando recomeça. Um ponto de melhora é a organização e limpeza do código, não sei se em algumas das partes que criei por conta própria é possível deixar mais limpo, mas eu tentei.

Aqui está o link para testar o jogo: https://editor.p5js.org/jonas.rct/full/Rzl9YWLPa

Código sem as variáveis da bola e raquete, são iguais as da aula (retiradas por limite de caracteres)

// variável para função random
let numeroAleatorio = [-6, 6];

function preload(){
  trilha = loadSound("barulhocerto.mp3");
  ponto = loadSound("TOME.mp3");
  batida = loadSound("raquetada.mp3");
  random(numeroAleatorio)
}
function setup() {
  createCanvas(600, 400);
  trilha.loop();
}
function draw() {
  background(0);
  mostraBolinha();
  movimentoBolinha();
  verificarColisaoBorda(); 
  mostraBarra(xBarraE, yBarraE);
  movimentoBarraE();
  mostraBarra(xBarraD, yBarraD);
  movimentoBarraD();
  colisaoBarra(xBarraE, yBarraE);
  colisaoBarra(xBarraD, yBarraD);
  incluiPlacar();
  marcaPonto();
  fimDeJogo();
  mensagemFimDeJogo();
  recomecarBola();
  arrumarBolinhaPresa();
  barraDentroDasBordas();
}

// bolinha
function mostraBolinha(){
  circle(xBolinha, yBolinha, diametro);
}
function movimentoBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}
function verificarColisaoBorda(){
  if (xBolinha + raio > width ||
     xBolinha - raio < 0){
    velocidadeXBolinha *= -1;
  }
  if (yBolinha + raio > height ||
    yBolinha - raio < 0){
   velocidadeYBolinha *= -1
 }
}

// barra/raquete
function mostraBarra(x,y){
  rect(x, y, comprimentoBarra, alturaBarra, bordaBarra)
}
function movimentoBarraE(){
  if (keyIsDown(87)){
    yBarraE -= 10;
  }
  if (keyIsDown(83)){
    yBarraE += 10;
  }
}
function movimentoBarraD(){
  //velocidadeYBarraD = yBolinha - yBarraD - comprimentoBarra / 2 - 30;
  //yBarraD += velocidadeYBarraD
  if (keyIsDown(UP_ARROW)){
    yBarraD -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yBarraD += 10;
  }
}
function colisaoBarra(x, y){
   colidiu =
collideRectCircle(x, y, comprimentoBarra, alturaBarra, xBolinha, yBolinha, raio);
  if (colidiu){
    velocidadeXBolinha *= -1
    batida.play();
  }
}

// placar e pontuação
function incluiPlacar (){
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(255, 140, 0));
  rect(150, 10, 40, 20, 10);
  fill(255);
  text(meusPontos, 170, 26);
  fill(color(255, 140, 0));
  rect(450, 10, 40, 20, 10);
  fill(255);
  text(pontosOponente, 470, 26);
}
function marcaPonto(){
  if (xBolinha > 590){
    meusPontos += 1;
    ponto.play();
  }
  if (xBolinha < 10){
    pontosOponente += 1;
    ponto.play();
  }
}

// fim de jogo e recomeço
function recomecarBola (){
  if (keyIsDown(32)){
    xBolinha = 300;
    yBolinha = 200;
    velocidadeXBolinha = random(numeroAleatorio);
    velocidadeYBolinha = random(numeroAleatorio);
    meusPontos = 0;
    pontosOponente = 0;
  }
}
function fimDeJogo(){
  if (meusPontos >= 10){
    xBolinha = 300;
    yBolinha = 200;
    velocidadeYBolinha = 0;
    velocidadeXBolinha = 0;
    xBarraE = 5;
    yBarraE= 150;
    xBarraD = 585;
    yBarraD = 150;
  }
  if (pontosOponente >= 10){
    xBolinha = 300;
    yBolinha = 200;
    velocidadeYBolinha = 0;
    velocidadeXBolinha = 0;
    xBarraE = 5;
    yBarraE= 150;
    xBarraD = 585;
    yBarraD = 150;
  }
}
function mensagemFimDeJogo(){
  if (meusPontos >= 10 && xBolinha === 300 && yBolinha === 200 && velocidadeYBolinha === 0){
    textAlign(CENTER);
    textSize(30);
    fill(255)
    text('Jogador 1 Venceu', 300, 300);
  }
  if (pontosOponente >= 10 && xBolinha === 300 && yBolinha === 200 && velocidadeYBolinha === 0){
    textAlign(CENTER);
    textSize(30);
    fill(255)
    text('Jogador 2 Venceu', 300, 300);
  }
}

// correções
function arrumarBolinhaPresa(){
    if (xBolinha - raio <= 0){
    xBolinha = 17;
    }
    if (xBolinha + raio >= 600){
    xBolinha = 573;
    }
}
function barraDentroDasBordas(){
  if (yBarraE < 0){
    yBarraE *= -0.2; 
  } 
  if (yBarraE > 310){ 
    yBarraE = 308;
  }
  if (yBarraD <0){
    yBarraD *= -0.2;
  }
  if (yBarraD > 310){
    yBarraD = 308;
  }
}
1 resposta

Oi oi, tudo bem?

Seu jogo ficou sensacional!

Parabéns pelo projeto e eu morri de rir com a vinheta de pontos hahaha!

Seu código ficou bastante organizado mesmo e as implementações ajudam a aplicar o conhecimento.

Continue com esse foco!

Um abraço e bons estudos!