Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

A bolinha não colide com a raquete

Por favor alguém pode explicar qual foi o meu erro? Além de não colidir com a raquete, as vezes a bola parece colidir com uma parede invisível e faz movimentos estranhos.

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;

let velocidadeXBolinha = 6
let velocidadeYBolinha = 6
let raio = diametro/2

let xRaquete = 5
let yRaquete = 150
let alturaRaquete = 10 
let comprimentoRaquete = 90

let velocidadeYRaquete = 10

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha();
  //movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMinhaRaquete();
  verificaColisaoMinhaRaquete();
  }

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

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

function verificaColisaoBorda(){
  if(xBolinha + raio > width ||
    xBolinha - raio < 0){
    velocidadeXBolinha*= -1
  }

  if (yBolinha + raio > height ||
     yBolinha - raio < 0){
     velocidadeYBolinha*=-1
  }}
 function mostraRaquete(){
   rect(xRaquete, yRaquete, alturaRaquete, comprimentoRaquete)
 }

 function movimentaMinhaRaquete(){
   if (keyIsDown(UP_ARROW)){
     yRaquete-= 10;
   }
   if (keyIsDown(DOWN_ARROW)){
     yRaquete-= -10;
   }}
function verificaColisaoMinhaRaquete(){
  if (xBolinha - raio < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1; 
  }
}
2 respostas
solução!

Pelo que eu consegui ver no seu código, você se confundiu com as variáveis da raquete (altura e comprimento) você acabou deixando invertida a ordem e quando é pra você chamar uma, você esta chamando a outra. Por exemplo na função que desenha a raquete, ela é chamada com os seguintes parâmetros:

rect(x, y, w, h)

ou seja

rect(xRaquete, yRaquete, widthRaquete, heightRaquete)

que no seu caso seria:

rect(xRaquete, yRaquete, comprimentoRaquete, AlturaRaquete)

Editei o seu código e deixei com os comentários pra você ver as alterações e os códigos antigos:

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;

let velocidadeXBolinha = 6
let velocidadeYBolinha = 6
let raio = diametro/2

let xRaquete = 5
let yRaquete = 150
// *antigo* let alturaRaquete = 10 
// *antigo* let comprimentoRaquete = 90
let larguraRaquete = 10;
let alturaRaquete = 90;

let velocidadeYRaquete = 10

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMinhaRaquete();
  verificaColisaoMinhaRaquete();
  }

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

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

function verificaColisaoBorda(){
  if(xBolinha + raio > width ||
    xBolinha - raio < 0){
    velocidadeXBolinha*= -1
  }

  if (yBolinha + raio > height ||
     yBolinha - raio < 0){
     velocidadeYBolinha*=-1
  }
}

/* função antiga
 function mostraRaquete(){
   rect(xRaquete, yRaquete, alturaRaquete, comprimentoRaquete)
 }
*/

// Função Nova
function mostraRaquete(){
  rect(xRaquete, yRaquete, larguraRaquete, alturaRaquete);
}

 function movimentaMinhaRaquete(){
   if (keyIsDown(UP_ARROW)){
     yRaquete-= 10;
   }
   if (keyIsDown(DOWN_ARROW)){
     yRaquete-= -10;
   }
}

/* Função antiga
function verificaColisaoMinhaRaquete(){
  if (xBolinha - raio < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1; 
  }
}
*/

// Função nova
function verificaColisaoMinhaRaquete(){
  if (xBolinha - raio < xRaquete + larguraRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1;
  }
}

PS. Eu mudei de "comprimento" para "largura" pq pra mim é mais fácil de entender, mas você pode modificar no decorrer do curso, se ficar confuso.

E talvez se você deixar a bolinha um pouco maior, aconteçam menos erros de colisão atrás da raquete.

Obrigada! Já fiz a correção conforme a sua explicação.