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

[Dúvida] Live server crashando no vscode, mesmo com extensões

Boa noite, estou usando o vscode para realizar o projeto e ja instalei as extensões p5.vscode e p5js live editor, contudo quando eu abro o live server ele crasha no momento que vai tocar algum audio.

segue o codigo



//bolinha
let pos_x_bol = 300;
let pos_y_bol = 200;
let diametro = 15;

let velocidadex = 6;
let velocidadey = 6;

// raquete player1
let raquete1_x = 10;
let raquete1_y = 150;
let altura1 = 90;
let largura1 = 10;

//raquete player 2
let raquete2_x = 585;
let raquete2_y = 150;
let velocidade_raquete;

// colisao
let colidiu = false;

//pontuação
let ponto_meus = 0;
let pontos_inimigo = 0;

let quadrado_ponto1x = 130;
let quadrado_ponto1y = 10;

let quadrado_ponto2x = 430;
let quadrado_ponto2y = 10;

//sons
let som_rebatida;
let trilha;
let som_ponto;

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

function setup() {
  createCanvas(600, 400); //tamanho da tela
  trilha.loop();
}

function draw() {
  background(0);    // cor da tela
  fill(255);
  circle(pos_x_bol,pos_y_bol,15); // cordenadas, e diametro da bola
  movBol();
  borda();
  movRaq1();
  rebate(); // rebate a bolinha com a raquete do jogador
  rebate2();  // adversario, usa de biblioteca
  fill(255);
  rect(raquete1_x, raquete1_y, largura1, altura1);  //raquete 1
  rect(raquete2_x,raquete2_y,largura1,altura1); //raquete 2
  segue_bola(); // raquete 2 segue a bolinha

  pontos();
}

function movBol(){
  pos_x_bol = velocidadex + pos_x_bol;
  pos_y_bol = velocidadey + pos_y_bol;
}

function borda(){
  if(pos_x_bol > width -7.5 || pos_x_bol < 7.5){ //width pega a largura maxima
    velocidadex = -1*velocidadex;
  }

  if(pos_y_bol > height - 7.5 || pos_y_bol < 7.5){  //height pega a altura maxima
    velocidadey = velocidadey * -1;
  }
}

function movRaq1(){
    if(keyIsDown(DOWN_ARROW)){
      raquete1_y += 5;
    }

    if(keyIsDown(UP_ARROW)){
      raquete1_y -= 5;
    }
    raquete1_y = constrain(raquete1_y,0,310);
}

function rebate(){
  if(pos_x_bol - 7.5 < raquete1_x + largura1){  //toca no raquete em x
    if(pos_y_bol - 7.5 < raquete1_y + altura1 && pos_y_bol + 7.5 > raquete1_y){
        velocidadex *= -1;
        som_rebatida.play();
    }
  }
}

function rebate2(){
  colidiu  = collideRectCircle(raquete2_x,raquete2_y,largura1,altura1,pos_x_bol,pos_y_bol,7.5);
  if(colidiu){
    velocidadex *= -1;
    som_rebatida.play();
  }
}

function segue_bola(){

    raquete2_y = pos_y_bol - 100;  // 1 OPÇÃO
    raquete2_y = constrain(raquete2_y,0,310);
  
    /*velocidade_raquete = pos_x_bol - raquete2_y - altura1/2 - 30 ;  // 2 OPÇÃO
    raquete2_y += velocidade_raquete;
    // calculo do deslocamento que a raquete precisa fazer em relação a bola, junto de um erro pra não acertar sempre
    */
    

}

function pontos(){

  if(pos_x_bol < 10){
      pontos_inimigo++;
      som_ponto.play();
  }

  if(pos_x_bol > 590){
    ponto_meus++;
    som_ponto.play();
  }
  stroke(255)
  textSize(16);
  textAlign(CENTER);
  fill(color(255,140,0));
  rect(quadrado_ponto1x,quadrado_ponto1y,40,30);
  fill(255)  // branco
  text(ponto_meus,150,26);
  fill(color(255,140,0));
  rect(quadrado_ponto2x,quadrado_ponto2y,40,30);
  fill(255);
  text(pontos_inimigo,450,26);

}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <script src="sketch.js"></script>
    <script src="p5.collide2d.js"></script>
    <script src="../p5.min.js"></script>
  </body>
</html>
2 respostas
solução!

Olá, Bruno! Tudo bem?

Pelo que pude observar no seu código, parece que você digitou a função preload() como preLoad(). Em JavaScript, a diferenciação entre maiúsculas e minúsculas é importante, então pode ser que a função não esteja sendo reconhecida corretamente.

Tente substituir preLoad() por preload() e veja se o problema persiste.

Seu código corrigido ficaria assim:

//sons
let som_rebatida;
let trilha;
let som_ponto;

function preload(){
  som_ponto = loadSound("ponto.mp3");
  trilha = loadSound("trilha.mp3");
  som_rebatida = loadSound("raquetada.mp3");
}

//restante do código...

Caso tenha dúvidas, fico à disposição!

Espero ter ajudado.

Abraços e bons estudos!

Obrigado Sarah, era isso mesmo :) .