1
resposta

Não estou conseguindo carregar os sons no Sublime Text.

Há alguma maneira de carregar os sons no Sublime?

Estou há um bom tempo tentando, mas não consegui... Lembrando que coloquei os arquivos de som na pasta do P5.


// Variáveis da Bolinha
let xBolinha=300;
let yBolinha=200;
let diametro=15;
let raio=diametro/2;

// Movimentação da Bolinha
let velocidadeXbolinha=5;
let velocidadeYbolinha=5;

// Variáveis da Raquete
let xRaquete=10;
let yRaquete=150;
let compRaquete=10;
let alturaRaquete=90;

//Raquete Oponente
let xRaqueteOponente=580
let yRaqueteOponente=150   
let velocidadeYOponente;

//Placar
let pontos=0;
let pontosOponente=0;



function criaBolinha() {

  circle(xBolinha, yBolinha, diametro);

}

function movimentacaoBolinha() {

  xBolinha+=velocidadeXbolinha;
  yBolinha+=velocidadeYbolinha;

}

function colisao() {

  if(xBolinha+raio>width || xBolinha-raio<0) {

    velocidadeXbolinha*=-1;

  }

  if(yBolinha+raio>height || yBolinha-raio<0) {

    velocidadeYbolinha*=-1;

  }

}

function criaRaquete(x, y) {

  rect(x, y, compRaquete, alturaRaquete);

}


function moveRaquete() {

  if(keyIsDown(UP_ARROW)) {

    yRaquete-=5;

  }

  if(keyIsDown(DOWN_ARROW)) {

    yRaquete+=5;

  }

}

function moveOponente() {

  velocidadeYOponente=yBolinha-yRaqueteOponente-compRaquete/2-30;
  yRaqueteOponente+=velocidadeYOponente;

}

function colisaoRaquete() {

  if(xBolinha-raio<xRaquete+compRaquete && yBolinha-raio<yRaquete+alturaRaquete && yBolinha+raio>yRaquete){

    velocidadeXbolinha*=-1;
    raquetada.play();

  }

 }

 function colisaoRaqueteOponente() {

  if(xBolinha+raio>xRaqueteOponente+compRaquete && yBolinha+raio<yRaqueteOponente+alturaRaquete && yBolinha+raio>yRaqueteOponente){

    velocidadeXbolinha*=-1;
    raquetada.play();

  }

 }  

 function placar(){

  textAlign(CENTER);
  textSize(16);
  fill(color(240, 140, 0));
  rect(150, 10, 40, 20);
  fill(255);
  text(pontos, 170, 26);
  fill(color(240, 140, 0));
  rect(450, 10, 40, 20);
  fill(255);
  text(pontosOponente, 470, 26);
  ponto.play();

  if(xBolinha>590){

    pontos+=1;

  }

  if(xBolinha<10){

    pontosOponente+=1;

  }

 }

 function preload() {

  trilha=loadSound("trilha.mp3");
  ponto=loadSound("ponto.mp3");
  raquetada=loudSound("raquetada.mp3");

 }


function setup() {
  createCanvas(600, 400);
  trilha.loop();
}

function draw() {
  background(0);
  criaBolinha();
  movimentacaoBolinha();
  colisao();
  criaRaquete(xRaquete, yRaquete);
  criaRaquete(xRaqueteOponente, yRaqueteOponente);
  moveRaquete();
  moveOponente();
  colisaoRaquete();
  colisaoRaqueteOponente();
  placar();

}
1 resposta

Oi oi, Marcos! Tudo bom por aí?

Precisamos fazer algumas modificações para os arquivos serem lidos pelos editores de texto e às vezes surge um erro de CORS que impede a reprodução de áudio por ter origens de protocolo distintas. Há algumas formas de solucionar esse problema:

  1. Baixar a biblioteca de som p5.sound.min.js e fazer a referência dela de forma direta (igual com o collide)
  2. Você pode utilizar uma extensão para configurar o CORS: No curso JS na Web: Manipule o DOM com JavaScript,na aula "criando módulos" o instrutor ensina a configurar o CORS a partir de 07:50 min de aula

Além disso, uma aluna deixou uma solução bem bacana para desenvolver o jogo em JavaScript mais puro, vou deixar o link para o tópico Projeto concluído no VS Code

Espero ter ajudado, fico à disposição!

Um abraço e bons estudos!

Avante!