1
resposta

[Dúvida] Fiz o mesmo código do professor, porém meu projeto está dando erro, na prévia fica escrito ao lado "Loading..."

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

//velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;
let raqueteComprimento = 10;
let raqueteAltura = 90;

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

//variáveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

let colidiu = false;

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

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

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

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

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

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(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;
  }
}

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);
  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 > 590){
    meusPontos += 1;
    ponto.play();
  }
  if (xBolinha < 10){
    pontosDoOponente += 1;
    ponto.play();
  }
}
1 resposta

Oi, Iraci! Tudo certo?

Obrigada pela paciência em obter um retorno.

Dei uma olhada no seu código e ele parece certinho, sim. Acredito que a causa para o bug é não ter importado os arquivos de sons e a biblioteca para colisão entre a raquete e a bolinha.

Para isso, fiz um breve tutorial. Vamos lá!

Primeiro de tudo, vamos para o p5.js. No editor nós temos a setinha para o lado, bem embaixo do botão de play.

Recorte de captura de tela do editor da biblioteca "p5.js", mostrando a setinha com preenchimento rosa, ao lado do "sketch.js".

Após isso, uma abinha chamada "Sketch Files" abrirá. Você vai clicar na setinha (triângulo) pra baixo.

Recorte de captura de tela do editor da biblioteca "p5.js", com um círculo de contorno vermelho marcando a setinha da parte escrita "Sketch Files".

Ao clicar, vão aparecer três opções. Clique na terceira, "Upload file".

Recorte de captura de tela do editor da biblioteca "p5.js", com uma seta apontando para a opção "Upload file", de preenchimento rosa.

No quadrado branco que aparecerá, basta clicar para fazer upload de algum arquivo. Com isso, você pode fazer a importação dos sons e da biblioteca de colisão! :)

Recorte de captura de tela do editor da biblioteca "p5.js", em que a parte para enviar um arquivo, "Upload file" está aberta.

Se as dúvidas persistirem, estamos à disposição! Até logo e bons estudos.

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