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

[Dúvida] Trilha do jogo não toca.

quando dou play no jogo a trilha não toca e aparece um erro no terminal;

TypeError: Cannot read properties of undefined (reading 'loop')

alguém poderia me dar um suporte aqui?

segue link >>> https://editor.p5js.org/andiamocarlo/sketches/1OLxIuXzE

2 respostas
solução!

Olá, Carlos! Tudo bem?

Você apenas tinha fechado o escopo da função setup antes de inserir o trilha.loop(), então não iria funcionar corretamente, segue o código corrigido:

//variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 18;
let raio = diametro /2;

//velocidade da bolinha
let velocidadexBolinha =6;
let velocidadeyBolinha = 6;

//variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 100;

//variaveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

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

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

//chance de errar
let chandeDeErrar = 0;

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();
verificaColisaoBorda();  
mostraRaquete(xRaquete, yRaquete);
movimentaMinhaRaquete ();
verificaColisaoRaquete()
mostraRaquete(xRaqueteOponente,yRaqueteOponente);
movimentaRaqueteOponente(); 
colisaoRaqueteOponente();
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;
    raquetada.play()
  }
}

function colisaoRaqueteOponente(){
  if (xBolinha + raio > xRaqueteOponente 
   && yBolinha + raio < yRaqueteOponente + raqueteAltura
   && yBolinha + raio > yRaqueteOponente){
  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 > 589){
    meusPontos += 1;
    ponto.play()
  }
  if (xBolinha < 10){
    pontosDoOponente += 1;
    ponto.play()
  }
}

Bons estudos!

Muito obrigado Camila, deu certinho agora!