1
resposta

Exercício Concluído - Super Pong - P5 JS Editor

Segue abaixo o Código de programação desenvolvido durante o curso. Adicionei uma função para evitar que a raquete avance além das bordas do canvas:

[()https://editor.p5js.org/SuinoSam/sketches/kDLgZZLhr#:~:text=%3Ciframe%20src%3D%22https%3A//editor.p5js.org/SuinoSam/full/kDLgZZLhr%22%3E%3C/iframe%3E]

//variáveis da Bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2;

//velocidade da Bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//variáveis da Raquete
let wRaquete = 10;
let hRaquete = 90;

//variáveis da Minha Raquete
let xRaquete = 5;
let yRaquete = 150;

//variáveis da Raquete do Oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeyOponente;


let colidiu = false;

// Placar do Jogo
let meusPontos = 0;
let pontosOponente = 0;

//sons do jogo;
let raquetada;
let ponto;
let trilha;

function preload (){
  trilha = loadSound ("trilha.mp3");
  ponto = loadSound ("ponto.mp3");
  raquetada = loadSound ("raquetada.mp3");
}

function setup() {
  createCanvas(600, 400);
  trilha.loop();
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  colisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  //colisaoRaquete();
  colisaoMinhaRaqueteBiblioteca(xRaquete, yRaquete);
  //mostraRaqueteOponente ();
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaquetaOponente ();
  colisaoMinhaRaqueteBiblioteca(xRaqueteOponente, yRaqueteOponente);
  colisaoBordaMinhaRaquete ();
  colisaoBordaRaqueteOponente ();
  mostrarPlacar ();
  marcaPonto ();


}

function mostraBolinha (){
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha (){
  xBolinha += velocidadeXBolinha; 
  yBolinha += velocidadeYBolinha;
}

function colisaoBorda (){
  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, wRaquete, hRaquete);
}

function movimentaMinhaRaquete (){
  if (keyIsDown (87)){
    yRaquete -= 10;
  }
  if (keyIsDown (83)){
    yRaquete += 10;  
  }
}

function colisaoRaquete (){
  if (xBolinha - raio < xRaquete + wRaquete && 
      yBolinha - raio < yRaquete + hRaquete && 
      yBolinha + raio > yRaquete ){

  velocidadeXBolinha *= -1;

  }
}

function colisaoMinhaRaqueteBiblioteca (x, y){
  colisao = collideRectCircle(x, y, wRaquete, hRaquete, 
                              xBolinha, yBolinha, raio);
  if (colisao){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

//function mostraRaqueteOponente ()
//{rect (xRaqueteOponente,yRaqueteOponente,wRaquete,hRaquete)}

function movimentaRaquetaOponente (){
   if (keyIsDown (UP_ARROW)){
    yRaqueteOponente -= 10;
  }
  if (keyIsDown (DOWN_ARROW)){
    yRaqueteOponente += 10;  
  }
}

function colisaoBordaMinhaRaquete (){
  if ( yRaquete + hRaquete > 400) {
    yRaquete -= 10;
  }
  if ( yRaquete < 0 ) {
    yRaquete += 10;
  }
}

function colisaoBordaRaqueteOponente (){
  if ( yRaqueteOponente + hRaquete > 400) {
    yRaqueteOponente -= 10;
  }
  if ( yRaqueteOponente < 0 ) {
    yRaqueteOponente += 10;
  }
}

function mostrarPlacar (){
  stroke (255);
  textAlign (CENTER);
  textSize (16);
  fill(255,140,0);
  rect(130,10,40,20);
  fill(255);
  text (meusPontos,150,26);
  fill(255,140,0);
  rect(430,10,40,20);
  fill(255);
  text (pontosOponente,450,26);
}

function marcaPonto (){
  if (xBolinha > 590){
    meusPontos += 1;
    ponto.play();
  }
   if (xBolinha < 10){
    pontosOponente += 1;
    ponto.play();
  }
}
1 resposta

Olá, Tudo bem?

Parabéns pelo belo código, dividido por responsabilidades, legível e com as novas implementações.

Obrigada também por compartilhar sua solução!

Continue com esse foco e engajamento, pois assim sua carreira irá brilhar!

Um abraço e bons estudos!