1
resposta

Ajuda - Código não roda

Por algum motivo meu código não está rodando. Poderiam me informar se fiz algo de errado ou é algum tipo de bug da p5.js? (obs: estava funcionando antes)

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 22;
let raio = diametro/2

//variáveis da velocidade da bolinha
let velocidadeXbolinha = 6
let velocidadeYbolinha = 6

//variáveis da raquete
let xRaquete = 5
let yRaquete = 150
let larguraRaquete = 10
let alturaRaquete = 75

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


let colidiu = false

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

let dOponenteBolinha = 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();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaqueteBiblioteca(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaqueteBiblioteca(xRaqueteOponente,  yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
  bolinhaNaoFicaPresa();
}

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, larguraRaquete, alturaRaquete)
}

function movimentaMinhaRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -=10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaquete +=10;
  }
  if (yRaquete < 3){
    yRaquete = 3;
  }
  if (yRaquete > 320){
    yRaquete = 320;
  }
}

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

function verificaColisaoRaqueteBiblioteca(x, y){
  colidiu =
collideRectCircle(x, y, larguraRaquete, alturaRaquete, xBolinha, yBolinha, diametro);
  if (colidiu){
    velocidadeXbolinha *= -1;
    raquetada.play();
  }
}

function movimentaRaqueteOponente(){
  velocidadeYoponente = yBolinha - yRaqueteOponente - larguraRaquete / 2 - dOponenteBolinha
  yRaqueteOponente +=velocidadeYoponente 
   if(pontosDoOponente > meusPontos)
  {
    dOponenteBolinha = 90;
  }
  if(pontosDoOponente < meusPontos && dOponenteBolinha > 50)
  {
    dOponenteBolinha -= 3;
  }
  if (yRaqueteOponente < 3){
    yRaqueteOponente = 3;
  }
  if (yRaqueteOponente > 320){
    yRaqueteOponente = 320;
  }
}

function incluiPlacar(){
  stroke(255)
  textAlign(CENTER)
  textSize(16)
  fill(color(148,0,211))
  rect(130, 10, 40, 20)
  fill(255)
  text(meusPontos, 150, 26)
  fill(color(148,0,211))
  rect(430, 10, 40, 20)
  fill(255)
  text(pontosDoOponente, 450, 26)
}

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


function bolinhaNaoFicaPresa(){
    if (xBolinha + raio < 0){
    console.log('bolinha ficou presa');
    xBolinha = 300;
    }
   if (xBolinha + raio > 605){
    console.log('bolinha ficou presa');
    xBolinha = 300;
    }
}

https://editor.p5js.org/kim_alex/sketches/D372HCjm5

1 resposta

Olá, Kim! Como você está?

Olhei seu projeto, está muito bom e gostaria de parabenizá-lo!

Só um detalhe que interferiu no funcionamento do seu projeto. Você modificou o nome do arquivo original mas não modificou o caminho de referência, olha só:

Antes estava assim no seu index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script> Aqui você precisa passar o nome do seu projeto
    <script src="p5.collide2d.js"></script>
  </body>
</html>

E para corrigir basta inserir o nome do correto do arquivo a ser lido:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="Pongv2.js"></script>
    <script src="p5.collide2d.js"></script>
  </body>
</html>

Deverá ficar assim no seu p5.js:

Imagem que mostra a estrutura de pastas e o nome do arquivo igual ao nome do caminho no arquivo index.html

Espero que as informações tenham ajudado!

Um abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software