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

Loading infinito

Por algum motivo o p5 nao esta reconhecendo minhas variáveis.

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

Elas foram criadas a seguir eu chamo elas na "function preload" mas ele nao reconhece e assim o jogo fica em um load Infinito

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
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 da raquete do oponete
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOpononente;

let colidiu = false;

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

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

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();
  movimentoBolinha();
  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 movimentoBolinha() {
  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 movimentaRaqueteOponente() {
  velocidadeYOponente =
    yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 30;
  yRaqueteOponente += velocidadeYOponente;
}

function verificaColisaoRaquete() {
  if (
    xBolinha - raio < xRaquete + raqueteComprimento &&
    yBolinha - raio < yRaquete + raqueteAltura &&
    yBolinha + raio > yRaquete
  ) {
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

function VerificaColisaoRaquete(x, y) {
  colidiu = collideRectCircle(
    x,
    y,
    raqueteComprimento,
    raqueteAltura,
    xBolinha,
    yBolinha,
    raio
  );
  if (colidiu) {
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

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

3 respostas
solução!

Oi, Junior! Tudo bem com você?

A preload() funciona para fazer o pré-carregamento dos arquivos e esse problema indica que o p5.js está tentando carregar os arquivos. Dessa forma, é possível que esse problema de Loading esteja ocorrendo por conta da localização em que os arquivos estão no seu projeto.

Se você criou uma pasta diferente para inserir os arquivos, lembre-se que você precisa referenciá-la no caminho da função preload(), pois as pastas possuem uma hierarquia e se o caminho não for passado corretamente o p5.js não irá encontrá-los.

Verifique se os arquivos de som estão na pasta raiz como na imagem abaixo:

Imagem mostra arquivos todos na pasta raiz do projeto do p5.js

Se puder compartilhar o link do seu projeto para que eu possa visualizar de forma mais clara, com certeza vai ajudar muito!

Fico no aguardo!

Um abraço e bons estudos!

Oi, Junior!

Fiz um print do seu projeto e podemos perceber que os arquivos estão dentro de uma pasta "sound" mas estão sendo chamados com um nome diferente e como se estivessem na pasta raiz . Dessa forma o p5.js vai tentar carregar algo e não irá conseguir, por isso o Loading fica eternamente no preview.

Imagem que mostra arquivos de música dentro de uma pasta sound e a direita os arquivos sendo chamados com um nome diferente e como se estivessem em uma pasta raiz

Além disso você chamou o som da raquetada com uma " , " e o correto é raquetada.mp3

Outro ponto de atenção é em relação aos arquivos que serão utilizados. Se você estiver em um sistema operacional Windows, use os arquivos na pasta Pong - Sons. Porém, se você estiver em um MAC, utilize os arquivos na pasta _MACOSX

Imagem com a lista de pastas de arquivos _MACOSX e Pong - sons

Passos para solucionar o problema:

  • Utilize os arquivos correspondentes ao sistema operacional
  • Insira os arquivos na pasta raiz
  • Verifique os nomes dos arquivos se estão corretamente escritos. Ex: substitua raquetada,mp3 por raquetada.mp3

Espero que as informações tenham ajudado!

Um abraço e bons estudos!