Play e loop não são reconhecidos

Fala, Guilherme! Tudo bem contigo?

O acontece é que a variável trilhanão foi declarada.

Uncaught ReferenceError: trilha is not defined (sketch: line 41)

Neste caso, deve ser no lugar da variável a

let a;

Ao alterarmos, teremos outro problema com o método play

Uncaught TypeError: Cannot read property 'play' of undefined (sketch: line 41)

Ele não reconhece!

Vamos alterar para loop, pois é necessário que a trilha fique tocando constantemente. Mas ainda continua dando erro no mesmo ponto.

O erro agora acontece que a função preload()está como a letra L maiúscula

function preLoad() {

Feito essa alteração o código correrá normalmente!

Espero ter ajudado, Guilherme!

Um abraço e bons estudos!!!

var larguraTela = 600;
var alturaTela = 400;
//variaveis da Bola
var diametro = 12;
var raio = diametro / 2;
var x = larguraTela / 2;
var y = alturaTela / 2;
var velocidadeXBola = 8;
var velocidadeYBola = velocidadeXBola; 
//variaveis raquetes
var larguraRaquete = 12;
var alturaRaquete = 100;
//variaveis minha raquete
var xMinhaRaquete = 12;
var yMinhaRaquete = alturaTela / 2;
//variaveis raquete oponente
var xRaqueteOponente = larguraTela - 2 * larguraRaquete;
var yRaqueteOponente = alturaTela / 2;
var velocidadeYOponente;
//variaveis do placar
var meusPontos = 0;
var pontosOponente = 0;
var colidiu;
//sons do jogo
var trilha;
var raquetada;
var ponto;

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

function criaBola(){
  circle(x, y, diametro);
}//ok

function raquete(x, y){
  rect(x, y, larguraRaquete, alturaRaquete)
}//ok

function verificaColisaoBordas(){
  if (x + raio > width || x - raio < 0){
    velocidadeXBola *= -1;
      }
  if (y + raio > height || y - raio < 0){
    velocidadeYBola *= -1;
  }
}//ok

function placar(){
  if (x + raio > width){
    meusPontos += 1;
    ponto.play();
  }
  if (x - raio < 0){
    pontosOponente += 1;
    ponto.play();
  }
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(123, 104, 238));
    rect(150, 10, 40, 20);
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(123, 104, 238));
    rect(450, 10, 40, 20);
    fill(255);
    text(pontosOponente, 470, 26);
}//ok

function moveBola(){
  x += velocidadeXBola;
  y += velocidadeYBola;
}//ok

function moveMinhaRaquete(){
   if (keyIsDown(UP_ARROW) && yMinhaRaquete > 0){
    yMinhaRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW) && yMinhaRaquete + alturaRaquete < height){
    yMinhaRaquete += 10;
  }
}//ok

function moveRaqueteOponente(){
  velocidadeYOponente = y - yRaqueteOponente - alturaRaquete / 2 - 30;
  yRaqueteOponente += velocidadeYOponente;  
}

function colisaoRaquete(a, b) {
    colidiu = collideRectCircle(a, b, larguraRaquete, alturaRaquete, x, y, raio);
    if (colidiu) {
        velocidadeXBola *= -1;
        raquetada.play();
    }
}//ok

function setup() {
  createCanvas(larguraTela, alturaTela);
  //preLoad();
  trilha.loop();
}

function draw() {
  background(0);
  criaBola();//ok
  raquete(xMinhaRaquete, yMinhaRaquete);//ok
  raquete(xRaqueteOponente, yRaqueteOponente);//ok
  verificaColisaoBordas();//ok
  colisaoRaquete(xMinhaRaquete, yMinhaRaquete);//ok
  colisaoRaquete(xRaqueteOponente, yRaqueteOponente);//ok
  placar();//ok
  moveBola();//ok
  moveMinhaRaquete();//ok
  moveRaqueteOponente();
}

Fiz as alterações que o Cassio descreveu mas continua dando erro: Uncaught TypeError: Cannot read property 'loop' of undefined (sketch: line 104)

Também gostaria de saber como fazer pra não deixar a raquete do oponente "entrar pela borda superior da tela". Tentei colocar o corpo da função dentro um while (yRaqueteOponente > 0) mas pagina inteira trava quando tento rodar e sou obrigado a reiniciar o navegador.

Fala, Breno!!! Como vai?

Dei olhada novamente e vamos alterar alguns pontos ;-)

Primeiro vamos substituir o "L" maiúsculo por "l" minúsculo do preload.

Feito isso, podemos retirar ele de dentro do setup()

function setup() {
  createCanvas(larguraTela, alturaTela);
  trilha.loop();
}

Acredito que já conseguiremos rodar o código!!!

Para mexer no movimento da raquete precisamos alterar nas variáveis "y", mas veja esses pontos do preloadprimeiramente e nos retorne para seguirmos para o próximo passo.

Ficaremos no aguardo, Breno!!!

Um abraço!!!