1
resposta

[Sugestão] Melhoria no Código - Função de Colisão Repetida - 03 da

Na aula 03 da "módulo 05. Editando placar e adicionando sons" aparecem duas funções com o mesmo nome, sendo que uma foi gerada para passar os parâmetros na própria função e a outra, podemos apenas chamá-la diretamente no draw:

1ª Função é essa:

function verificaColisaoRaquete(){
    if(xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
        velocidadeXbolinha *= -1;
       raquetada.play();
    } 
}

2 ª Função é essa:

function verificaColisaoRaquete (x,y){
  colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
  if(colidiu){
    velocidadeXbolinha *= -1;
    raquetada.play();
  }
}

Nessa aula em uma parte do video da a atender que a 1ª função e da nossa raquete enquanto que a 2ª é do oponente, porém se no draw vc está chamado a funcão "verificaColisaoRaquete" passando os parâmetros de (x,y) estão não há necessidade da 2ª função.

  verificaColisaoRaquete(xRaquete,yRaquete);
  verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);

Você pode comprovar isso inserindo o ponto "raquetada.play();" apenas na 2ª e o son será demonstrando para ambas as raquetes, o seguinte resultado abaixo:

function verificaColisaoRaquete (x,y){
  colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
  if(colidiu){
    velocidadeXbolinha *= -1;
    raquetada.play();
  }
}

Para deixar o código mais limpo:

//Variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 13;
let raio = diametro / 2;

//Variáveis da velocidade da bolinha

let velocidadeXbolinha = 6;
let velocidadeYbolinha = 6;

//variaveis da raquete

let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura =90;

let colidiu = false;


//placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;

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

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


// Variaveis do Oponente 
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente = 6;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBordas();
  mostraRaquete(xRaquete,yRaquete);
  mostraRaquete(xRaqueteOponente,yRaqueteOponente);
  movimentaMinhaRaquete();
  movimentaRaqueteOponente();  
  verificaColisaoRaquete(xRaquete,yRaquete);
  verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);
  incluiPlacar();
  marcaPonto();

}

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

function movimentaBolinha(){
    xBolinha += velocidadeXbolinha;
    yBolinha += velocidadeYbolinha;
}

function verificaColisaoBordas(){
  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,raqueteComprimento,raqueteAltura);

}

function movimentaMinhaRaquete(){
  if(keyIsDown (UP_ARROW)){
    yRaquete -=10;
     }
    if(keyIsDown (DOWN_ARROW)){
    yRaquete +=10;
     }
}
function verificaColisaoRaquete(){  if(xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio <    yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
    velocidadeXbolinha *= -1;
   raquetada.play();
} 
}

function verificaColisaoRaquete (x,y){
  colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
  if(colidiu){
    velocidadeXbolinha *= -1;
    raquetada.play();
  }
}

function movimentaRaqueteOponente() {
  velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 30;
    yRaqueteOponente += velocidadeYOponente
}

function incluiPlacar() {
    stroke(255);
    textAlign(CENTER);
    textSize(16); 
    fill(color(255,140,0))
    rect(150,10,40,20,5)
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(255,140,0))
    rect(450,10,40,20,5)
    fill(255);
    text(pontosDoOponente, 470, 26);
}

function marcaPonto() {
    if(xBolinha > 590) {
       meusPontos += 1;
     }
  if(xBolinha < 10){
     pontosDoOponente += 1;   
     }
}
1 resposta

Olá, Maelson, tudo bem?

Ambas as funções são responsáveis pela colisão da raquete, a primeira criamos esse código do “zero” e a segunda o instrutor mostrou a possibilidade de importamos uma biblioteca do p5 que já faz essa colisão nos poupando tempo.

Note, que após inserir essa função que utiliza a biblioteca, a verificaColisaoRaquete(x,y), nós comentamos com o // a linha correspondente a chamada da primeira função verificaColisaoRaquete() na draw(). Portanto, apesar dela estar inserida no nosso programa, ela não está sendo executada. Inclusive, como não temos o objetivo de não utilizá-la mais, ela pode ser apagada como você fez.

Quanto a execução do som raquetada.play(); , ele está sendo executado quando há colisão em ambas as raquetes, pois chamamos a função verificaColisaoRaquete(x,y) na função draw() duas vezes, a primeira com as variáveis correspondentes a nossa raquete e segunda com as variáveis do oponente, como mostra o código abaixo:

 verificaColisaoRaquete(xRaquete,yRaquete);
 verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);

Espero ter ajudado.

Caso surja dúvidas, estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!