3
respostas

Nao consigo adicionar sons

Fica loading direto e n adiciona os sons.

// 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;

// variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

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

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


//variavel som
let raquetada;
let ponto;
let trilha;

// variavel chance do oponente errar
let chanceDeErrar = 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();
  verificaColisaoRaqueteOponente();
  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 movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 30;
  yRaqueteOponente += velocidadeYOponente + chanceDeErrar
  calculaChanceDeErrar()
}

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

}
function verificaColisaoRaqueteOponente(){
  if (xBolinha + raio > xRaqueteOponente &&  yBolinha - raio < yRaqueteOponente + raqueteAltura  && yBolinha + raio > yRaqueteOponente){
    velocidadeXBolinha *= -1;
 raquetada.play();
  }
}

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(255, 140, 0))
  rect(150, 10, 40, 20);
  fill(225);
  text(meusPontos, 170, 26);
  fill(color(255, 140, 0));
  rect(450, 10, 40, 20);
  fill(225);
  text(pontosDoOponente, 470, 26);
}

function marcaPonto(){
  if(xBolinha > 590){
    meusPontos += 1;
   ponto.play();
  }
  if(xBolinha <10){
    pontosDoOponente += 1;
 ponto.play();
  }
}

function calculaChanceDeErrar() {
  if (pontosDoOponente >= meusPontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}
3 respostas

Oi, Thais! Tudo bem contigo?

Esse problema é bem comum quando não estamos logados na conta do p5.js. Verifique se você está no seu projeto de sua conta, tudo bem?

Além disso é importante verificar também se os nomes dos arquivos de músicas estão iguais aos nomes que você irá fazer referência no código.

Caso o problema e dúvidas persistam, você pode compartilhar o link do seu projeto aqui no tópico. Vou enviar uma imagem para você visualizar melhor

Imagem com identificação do link do projeto no editor web do p5.js, que fica na barra de endereços do navegador

Basta copiar o link que fica na barra de endereço do projeto e compartilhar aqui.

Fico no aguardo!

Um abraço e bons estudos!

Boa tarde Camila, segue o link do meu código. Eu já nao sei o que fazer, por que simplesmente as imagens e sons não aparecem. Link: https://editor.p5js.org/thais.leite/sketches/S4KrixfAw

Oi, Thais!

Você enviou o projeto do curso Jogos Clássicos II, da vaquinha que atravessa a rua. Verifiquei seu projeto e percebi que há um problema no momento em que você faz a referência das imagens e sons. Não pode haver espaços e precisamos primeiro indicar o local (a pasta) em que elas estão e depois o nome da figura.

  • Função preload()

Dessa forma, sua função preload ficará da seguinte maneira:

function preload(){
imagemDaEstrada = loadImage("imagens/estrada.png") //pasta imagens/ figura estrada.png
imagemDoAtor = loadImage("imagens/ator-1.png")
imagemCarro = loadImage("imagens/carro-1.png")
imagemCarro2 = loadImage("imagens/carro-2.png")
imagemCarro3 = loadImage("imagens/carro-3.png")

  imagemCarros = [imagemCarro, imagemCarro2, imagemCarro3, imagemCarro, imagemCarro2, imagemCarro3]

  somDaTrilha = loadSound("sons/trilha.mp3");
  somDaColisao = loadSound("sons/colidiu.mp3");
  somDoPonto = loadSound("sons/ponto.mp3");
}

Como vou saber que a imagem está dentro de uma pasta?

Precisamos observar onde o arquivo que queremos fazer referência está. Por exemplo:

A pasta "imagens" contém todos os arquivos png que estão envolvidos nesse bloco, tudo que está na pasta vai aparecer logo abaixo dela.

O mesmo ocorre com a pasta "sons". Tudo que está dentro da pasta vai aparecer logo abaixo dela.

Imagem com p5 e hierarquia das pastas

Você pode observar que o arquivo style.css não está alinhado com os arquivos .mp3 justamente porque está fora da pasta "sons"

  • Projeto completo

Analisei o seu projeto e percebi que faltava uma palavra apenas no momento de chamar a biblioteca no index.html. Outros nomes de variáveis também estavam trocados e havia algumas condições que estavam em locais equivocados.

Fiz uma cópia do seu projeto com os ajustes. Você pode observar e modificar no seu projeto: https://editor.p5js.org/miasensei/sketches/4I8zFiPvh

Ficou mais claro agora?

Espero que tenha ajudado,

Até breve e bons estudos!