[Dúvida] Jogo completo, porém, não consigo adicionar um plano de fundo | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Bem, este é o meu primeiro projeto em uma linguagem de programação como o Js e antes de relatar o problema propriamente dito, queria agradecer ao professor Guilherme Lima pela didática e ao pessoal da Alura pelo conteúdo do curso e da plataforma do geral! Então, fiz o projeto, segui o passo a passo minunciosamente (claro, houve bugs mas consegui corrigir) e eu fui tentar colocar um plano de fundo no jogo pra dá uma diferenciada, porém não aparece e as vezes dá bug nas outras variáveis ou simplesmente não aparece ;-; ), bem gostaria de uma ajudinha em relação a isto. OBS: estou aberto a feedbacks em relação ao meu código e agradeço desde já! :D OBS²: irei deixar o link pois não consigo deixar o código bonitinho e ordenado no post como alguns amigos colocaram aqui na plataforma.

Link: https://editor.p5js.org/eulucasandre/sketches/66hHtrAGV

Olá Lucas, tudo joia?

Gostaria de parabeniza-lo por ter concluído este curso, espero que seja o primeiro de muitos e que você continue sempre buscando mais conhecimento.

Em relação ao que você queria, que é adicionar uma imagem de background no projeto, é bem simples!

Olhando o seu código as únicas alteração que você vai precisar fazer serão as seguintes:

function preload(){
  trilha = loadSound("trilha.mp3");
  ponto = loadSound("ponto.mp3");
  raquetada = loadSound("raquetada.mp3");
  wallpaper = loadImage("galaxybackground.png");
}

Pois não precisa adicionar a imagem de background da forma em que você tinha feito.

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

Dentro da função background() basta você adicionar a variável com a imagem carregada wallpaper, e pronto quando você rodar novamente ira aparecer uma belíssima imagem de fundo.

Espero que eu tenha lhe ajudado, se durante os seus estudos aparecerem dúvidas mesmo que sejam simples compartilhe elas no fórum, estamos aqui para lhe ajudar. Abraços e bons estudos!

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

Mergulhe em programação